Bootstrap Colors

Bootstrap colors are predefined color utilities that can be applied to different HTML elements.

For example, text-primary changes text color, while bg-primary changes background color.

<p class="text-primary">
    Primary Text
</p>

<div class="bg-primary text-white">
    Primary Background
</div>

Bootstrap provides several contextual color names:

• primary
• secondary
• success
• danger
• warning
• info
• light
• dark

These names are used with Bootstrap utility and component classes.

The primary color is commonly used for important actions, links, buttons, and main interface elements.

<p class="text-primary">
    Primary Text
</p>

<div class="bg-primary text-white p-3">
    Primary Background
</div>

The secondary color is useful for less prominent interface elements.

<p class="text-secondary">
    Secondary Text
</p>

<div class="bg-secondary text-white p-3">
    Secondary Background
</div>

The success color is commonly associated with successful operations or positive status messages.

<p class="text-success">
    Payment Successful
</p>

<div class="bg-success text-white p-3">
    Operation Completed
</div>

The danger color is commonly used for errors, warnings about destructive actions, or invalid states.

<p class="text-danger">
    Something went wrong.
</p>

<div class="bg-danger text-white p-3">
    Error Message
</div>

The warning color is useful for cautionary messages and situations that require attention.

<p class="text-warning">
    Please check your information.
</p>

<div class="bg-warning text-dark p-3">
    Warning Message
</div>

The info color can be used for informational messages and supporting content.

<p class="text-info">
    New information is available.
</p>

<div class="bg-info text-white p-3">
    Information
</div>

The light color provides a light background or a subtle visual appearance.

<div class="bg-light p-3">
    Light Background
</div>

<p class="text-light bg-dark p-3">
    Light Text
</p>

The dark color is commonly used for dark backgrounds, navigation areas, and strong visual sections.

<div class="bg-dark text-white p-3">
    Dark Background
</div>

Use text-* classes to change the color of text.

<p class="text-primary">Primary</p>
<p class="text-success">Success</p>
<p class="text-danger">Danger</p>
<p class="text-warning">Warning</p>
<p class="text-info">Info</p>
<p class="text-secondary">Secondary</p>
<p class="text-dark">Dark</p>

Use bg-* classes to apply background colors.

<div class="bg-primary p-3">
    Primary
</div>

<div class="bg-success p-3">
    Success
</div>

<div class="bg-danger p-3">
    Danger
</div>

When using dark backgrounds, you may need a suitable text color such as text-white.

Text and background utilities can be combined.

<div class="bg-primary text-white p-3">
    White text on primary background
</div>

<div class="bg-warning text-dark p-3">
    Dark text on warning background
</div>

Choose a text color that provides sufficient contrast with the background.

Bootstrap button classes use the same contextual color names.

<button class="btn btn-primary">
    Primary
</button>

<button class="btn btn-success">
    Success
</button>

<button class="btn btn-danger">
    Delete
</button>

<button class="btn btn-warning">
    Warning
</button>

Bootstrap also provides outline button variants.

<button class="btn btn-outline-primary">
    Primary
</button>

<button class="btn btn-outline-success">
    Success
</button>

<button class="btn btn-outline-danger">
    Danger
</button>

Outline buttons use a colored border and text instead of a solid background in their normal state.

Bootstrap alerts use contextual color classes.

<div class="alert alert-success">
    Payment successful!
</div>

<div class="alert alert-danger">
    Payment failed.
</div>

<div class="alert alert-warning">
    Please check your information.
</div>

<div class="alert alert-info">
    New information available.
</div>

Bootstrap badges can also use contextual color classes.

<span class="badge text-bg-primary">
    New
</span>

<span class="badge text-bg-success">
    Active
</span>

<span class="badge text-bg-danger">
    Closed
</span>

The text-bg-* utilities are useful when you want Bootstrap to provide suitable foreground and background colors together.

Bootstrap provides background opacity utilities that can make a background color partially transparent.

<div class="bg-primary bg-opacity-25 p-3">
    25% Background Opacity
</div>

<div class="bg-primary bg-opacity-50 p-3">
    50% Background Opacity
</div>

Common opacity utilities include bg-opacity-10, bg-opacity-25, bg-opacity-50, bg-opacity-75, and bg-opacity-100.

Colors can be combined with Bootstrap cards to create different visual sections.

<div class="card">

    <div class="card-header bg-primary text-white">
        Course
    </div>

    <div class="card-body">
        Learn Bootstrap.
    </div>

</div>

Bootstrap colors can be used with navigation components such as navbars.

<nav class="navbar bg-dark">

    <div class="container">

        <a class="navbar-brand text-white"
        href="#">
            My Website
        </a>

    </div>

</nav>

The background and text utilities can be combined to create readable navigation areas.

Bootstrap provides border color utilities such as border-primary, border-success, and border-danger.

<div class="border border-primary p-3">
    Primary Border
</div>

<div class="border border-success p-3">
    Success Border
</div>

<div class="border border-danger p-3">
    Danger Border
</div>

Border colors can be combined with border radius utilities.

<div
class="border border-primary rounded p-3">

    Rounded Primary Border

</div>

This combination is useful for cards, notices, boxes, and form sections.

Bootstrap provides many utility classes, but a normal utility such as text-primary does not automatically create a hover state.

For interactive hover behavior, use Bootstrap components or custom CSS where appropriate.

<a href="#" class="link-primary">
    Primary Link
</a>

The link-* utilities are designed specifically for links and include Bootstrap's link styling behavior.

Bootstrap provides contextual link color utilities.

<a href="#" class="link-primary">
    Primary Link
</a>

<a href="#" class="link-success">
    Success Link
</a>

<a href="#" class="link-danger">
    Danger Link
</a>

These classes are useful when you want links to have Bootstrap's contextual color styling.

Bootstrap's color system is built using CSS custom properties and Sass variables internally.

For example, components can use Bootstrap's theme colors through Bootstrap's predefined classes and variables.

:root {
    --bs-primary: #0d6efd;
}

You can use Bootstrap's public CSS custom properties when you need to work with its theme values in custom CSS.

Color should not be the only way to communicate important information. Text, icons, labels, or other visual indicators should also be used when necessary.

<div class="text-danger">

    <strong>Error:</strong>
    Please enter your email.

</div>

Good contrast between text and background is also important for readability and accessibility.

• Using too many colors on one page.
• Using text colors with poor contrast.
• Using text-white on a very light background.
• Using color as the only indicator of an important state.
• Using custom colors when a Bootstrap utility is sufficient.
• Applying a dark background without checking text readability.
• Using colors inconsistently across different sections.

• Use contextual colors consistently.
• Choose text and background combinations with sufficient contrast.
• Use primary for primary actions and interface elements.
• Use success and danger for meaningful states.
• Use warning for cautionary information.
• Use info for informational content.
• Use light and dark for visual contrast.
• Do not rely on color alone to communicate important information.

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
    name="viewport"
    content="width=device-width,
    initial-scale=1.0">

    <title>
        Bootstrap Colors
    </title>

    <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    rel="stylesheet">

</head>

<body>

<div class="container py-5">

    <h1 class="text-primary text-center">
        Bootstrap Colors
    </h1>

    <p class="text-body-secondary text-center">
        Learn how Bootstrap color utilities work.
    </p>

    <div class="row g-4 mt-3">

        <div class="col-md-4">

            <div class="card">

                <div
                class="card-header bg-primary text-white">

                    Primary

                </div>

                <div class="card-body">

                    <p class="text-primary">
                        Primary Text
                    </p>

                    <button
                    class="btn btn-primary">
                        Primary Button
                    </button>

                </div>

            </div>

        </div>

        <div class="col-md-4">

            <div class="card">

                <div
                class="card-header bg-success text-white">

                    Success

                </div>

                <div class="card-body">

                    <p class="text-success">
                        Success Text
                    </p>

                    <button
                    class="btn btn-success">
                        Success Button
                    </button>

                </div>

            </div>

        </div>

        <div class="col-md-4">

            <div class="card">

                <div
                class="card-header bg-danger text-white">

                    Danger

                </div>

                <div class="card-body">

                    <p class="text-danger">
                        Danger Text
                    </p>

                    <button
                    class="btn btn-danger">
                        Delete
                    </button>

                </div>

            </div>

        </div>

    </div>

    <div class="alert alert-warning mt-4">

        <strong>Warning:</strong>

        Please check your information.

    </div>

    <div class="border
                border-primary
                rounded
                p-3
                mt-4">

        <a href="#"
        class="link-primary">

            Learn More

        </a>

    </div>

</div>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>

</body>

</html>

This example combines Bootstrap text colors, background colors, buttons, alerts, borders, cards, and link colors in one responsive layout.