Bootstrap 5 Framework

Bootstrap Color System

12 min Lesson 14 of 40

Introduction to Bootstrap Color System

Bootstrap provides a comprehensive color system with semantic theme colors, utility classes, and opacity controls. This lesson covers all the ways to work with colors in Bootstrap.

Theme Colors

Bootstrap includes a set of predefined theme colors that convey meaning and maintain consistency across your application:

<!-- Primary theme colors -->
<div class="bg-primary text-white p-3">Primary</div>
<div class="bg-secondary text-white p-3">Secondary</div>
<div class="bg-success text-white p-3">Success</div>
<div class="bg-danger text-white p-3">Danger</div>
<div class="bg-warning text-dark p-3">Warning</div>
<div class="bg-info text-dark p-3">Info</div>
<div class="bg-light text-dark p-3">Light</div>
<div class="bg-dark text-white p-3">Dark</div>
    

Note: These eight theme colors form the foundation of Bootstrap's color system and are used throughout all components.

Text Color Utilities

Apply color to text using text color utility classes:

<p class="text-primary">This text is primary color</p>
<p class="text-secondary">This text is secondary color</p>
<p class="text-success">This text is success color</p>
<p class="text-danger">This text is danger color</p>
<p class="text-warning">This text is warning color</p>
<p class="text-info">This text is info color</p>
<p class="text-light bg-dark">This text is light color</p>
<p class="text-dark">This text is dark color</p>

<!-- Additional text colors -->
<p class="text-body">Default body text color</p>
<p class="text-muted">Muted text color</p>
<p class="text-white bg-dark">White text color</p>
<p class="text-black-50">Black with 50% opacity</p>
<p class="text-white-50 bg-dark">White with 50% opacity</p>
    

Background Color Utilities

Background colors can be applied to any element using bg- utility classes:

<!-- Solid background colors -->
<div class="bg-primary text-white p-3 mb-2">Primary background</div>
<div class="bg-success text-white p-3 mb-2">Success background</div>
<div class="bg-warning text-dark p-3 mb-2">Warning background</div>
<div class="bg-danger text-white p-3 mb-2">Danger background</div>

<!-- Light backgrounds -->
<div class="bg-light p-3 mb-2">Light background</div>
<div class="bg-white p-3 mb-2 border">White background</div>
<div class="bg-transparent p-3 mb-2 border">Transparent background</div>
    

Color Opacity Utilities

Bootstrap 5.1+ includes opacity utilities that work with background and text colors:

<!-- Background color with opacity -->
<div class="bg-primary bg-opacity-100 p-3 mb-2">100% opacity</div>
<div class="bg-primary bg-opacity-75 p-3 mb-2">75% opacity</div>
<div class="bg-primary bg-opacity-50 p-3 mb-2">50% opacity</div>
<div class="bg-primary bg-opacity-25 p-3 mb-2">25% opacity</div>
<div class="bg-primary bg-opacity-10 p-3 mb-2">10% opacity</div>

<!-- Text color with opacity -->
<p class="text-primary text-opacity-100">100% opacity</p>
<p class="text-primary text-opacity-75">75% opacity</p>
<p class="text-primary text-opacity-50">50% opacity</p>
<p class="text-primary text-opacity-25">25% opacity</p>
    

Tip: Opacity utilities allow you to create subtle color variations without defining new colors in your CSS.

Gradient Backgrounds

Create gradient backgrounds by combining bg- classes with the bg-gradient class:

<div class="bg-primary bg-gradient text-white p-3 mb-2">
    Primary gradient background
</div>
<div class="bg-success bg-gradient text-white p-3 mb-2">
    Success gradient background
</div>
<div class="bg-danger bg-gradient text-white p-3 mb-2">
    Danger gradient background
</div>
<div class="bg-dark bg-gradient text-white p-3 mb-2">
    Dark gradient background
</div>
    

Color Combinations in Components

Combine text and background colors to create visually appealing components:

<!-- Alert-style combinations -->
<div class="bg-success bg-opacity-10 border border-success text-success p-3 mb-2">
    <strong>Success:</strong> Operation completed successfully!
</div>

<div class="bg-warning bg-opacity-10 border border-warning text-warning p-3 mb-2">
    <strong>Warning:</strong> Please review your changes.
</div>

<div class="bg-danger bg-opacity-10 border border-danger text-danger p-3 mb-2">
    <strong>Error:</strong> Something went wrong!
</div>

<div class="bg-info bg-opacity-10 border border-info text-info p-3 mb-2">
    <strong>Info:</strong> Here's some helpful information.
</div>
    

Link Colors

Style links with semantic colors:

<a href="#" class="link-primary">Primary link</a>
<a href="#" class="link-secondary">Secondary link</a>
<a href="#" class="link-success">Success link</a>
<a href="#" class="link-danger">Danger link</a>
<a href="#" class="link-warning">Warning link</a>
<a href="#" class="link-info">Info link</a>
<a href="#" class="link-light">Light link</a>
<a href="#" class="link-dark">Dark link</a>
    

Contextual Backgrounds with Contrasting Text

Bootstrap automatically provides good contrast, but you can explicitly set text color:

<!-- Dark backgrounds need light text -->
<div class="bg-primary text-white p-3">Primary with white text</div>
<div class="bg-dark text-white p-3">Dark with white text</div>
<div class="bg-success text-white p-3">Success with white text</div>

<!-- Light backgrounds need dark text -->
<div class="bg-light text-dark p-3">Light with dark text</div>
<div class="bg-warning text-dark p-3">Warning with dark text</div>
<div class="bg-info text-dark p-3">Info with dark text</div>
    

Warning: Always ensure sufficient color contrast for accessibility. Dark text on light backgrounds and light text on dark backgrounds provide the best readability.

Practical Example: Status Cards

Create informative status cards using color utilities:

<div class="container">
    <div class="row g-3">
        <div class="col-md-6">
            <div class="border border-success border-2 rounded p-4">
                <h5 class="text-success">Active Server</h5>
                <p class="text-muted mb-0">All systems operational</p>
                <span class="badge bg-success bg-opacity-25 text-success mt-2">
                    Online
                </span>
            </div>
        </div>

        <div class="col-md-6">
            <div class="border border-warning border-2 rounded p-4">
                <h5 class="text-warning">Maintenance Mode</h5>
                <p class="text-muted mb-0">Scheduled maintenance in progress</p>
                <span class="badge bg-warning bg-opacity-25 text-warning mt-2">
                    In Progress
                </span>
            </div>
        </div>

        <div class="col-md-6">
            <div class="border border-danger border-2 rounded p-4">
                <h5 class="text-danger">Service Down</h5>
                <p class="text-muted mb-0">Connection failed</p>
                <span class="badge bg-danger bg-opacity-25 text-danger mt-2">
                    Offline
                </span>
            </div>
        </div>

        <div class="col-md-6">
            <div class="border border-info border-2 rounded p-4">
                <h5 class="text-info">Update Available</h5>
                <p class="text-muted mb-0">New version ready to install</p>
                <span class="badge bg-info bg-opacity-25 text-info mt-2">
                    Action Required
                </span>
            </div>
        </div>
    </div>
</div>
    

Exercise: Create a Color Showcase

Create a page that demonstrates the Bootstrap color system:

Create a section showing all 8 theme colors with their names
Add a section with text colors and different opacity levels
Create custom alert-style messages using color combinations
Build a card with gradient background and contrasting text
Design a status indicator using colored borders and backgrounds

Bonus: Create a dark mode toggle that switches between light and dark color schemes using Bootstrap color utilities.

Summary

Bootstrap provides 8 semantic theme colors for consistent design
Text colors use text-* classes (text-primary, text-danger, etc.)
Background colors use bg-* classes (bg-success, bg-light, etc.)
Opacity utilities allow fine-tuned color transparency
Link colors can be styled with link-* classes
Gradients are created with the bg-gradient class
Always consider color contrast for accessibility
Combine colors thoughtfully to convey meaning and improve UX