Bootstrap 5 Colors

Color Categories

🔹 Theme Colors

Bootstrap’s eight Theme Colors provide a consistent, semantic palette for UI components: Primary, Secondary, Success, Danger, Warning, Info, Light, and Dark. Each color conveys specific meanings—guiding user behavior and improving interface intuition. These colors are customizable via CSS variables, ensuring brand alignment. They are used across buttons, alerts, badges, backgrounds, and text, creating a cohesive visual language that enhances usability, accessibility, and aesthetic harmony throughout the application.

<!-- Theme color examples -->
<p class="text-primary">Primary</p>
<p class="text-secondary">Secondary</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-light bg-dark">Light</p>
<p class="text-dark">Dark</p>

🔹 Text Colors

Text Colors are applied with .text-* utility classes to any text element, ensuring semantic coloring and accessibility compliance. These classes maintain proper contrast ratios as per WCAG guidelines. Use text colors to indicate status (success, danger), hierarchy (muted text), or to align with brand themes. They work responsively and can be combined with hover states or opacity utilities for interactive and layered typographic designs.

<p class="text-primary">This is primary text.</p>
<p class="text-success">This is success text.</p>
<p class="text-danger">This is danger text.</p>
<p class="text-warning">This is warning text.</p>
<p class="text-info">This is info text.</p>

<!-- Text on colored backgrounds -->
<p class="text-white bg-dark p-2">White text on dark background</p>

🔹 Background Colors

Background Colors (.bg-*) set the backdrop color for sections, cards, alerts, and other container elements. They help categorize content, create visual separation, and highlight important areas. Always pair background colors with appropriate text color classes (.text-*) to maintain readability and meet accessibility standards. Background colors are fully responsive and integrate with opacity and gradient utilities for enhanced visual effects.

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

🔹 Background Gradient

Background Gradients add subtle depth to colored backgrounds using the .bg-gradient class alongside any .bg-* class. Gradients create visual interest and a modern aesthetic without custom CSS. They are particularly effective in hero sections, buttons, or highlighted components. The gradient is a lightweight, linear overlay that works across all devices and supports Bootstrap’s theme colors, ensuring consistent branding and design polish.

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

<div class="bg-success bg-gradient text-white p-3">
    Success with gradient
</div>

<div class="bg-danger bg-gradient text-white p-3">
    Danger with gradient
</div>

🔹 Border Colors

Border Colors apply themed border colors using .border-* classes, matching Bootstrap’s semantic color system. Use these with border utilities to create outlined buttons, colored dividers, highlighted cards, or accent borders. Border colors help define edges, indicate state, or add decorative accents without affecting layout. They work seamlessly with border-width and border-radius utilities, providing a flexible way to incorporate color into component boundaries.

<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>
<div class="border border-warning p-3">Warning border</div>

<!-- Thick borders -->
<div class="border border-5 border-info p-3">Thick info border</div>

🔹 Opacity

Opacity Utilities control color transparency with .text-opacity-* and .bg-opacity-* classes, ranging from 10 to 100 in 25-point increments. These classes create subtle variations, layered effects, and disabled states without writing custom CSS. For example, lower opacity backgrounds can indicate inactive items, while semi-transparent text can be used for secondary information. Opacity utilities enhance design depth, improve visual hierarchy, and maintain consistency with Bootstrap’s utility-first workflow.

<!-- Text opacity -->
<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>

<!-- Background opacity -->
<div class="bg-success bg-opacity-75 p-3">75% opacity</div>
<div class="bg-success bg-opacity-50 p-3">50% opacity</div>
<div class="bg-success bg-opacity-25 p-3">25% opacity</div>

🔹 Color Utilities

Apply consistent, semantic colors with .text-{color} and .bg-{color} classes (e.g., .text-primary, .bg-success). Bootstrap includes contextual colors (primary, success, danger, etc.) and opacity variants (*-subtle, *-emphasis). Using these utilities ensures brand consistency and creates a clear visual hierarchy that guides users. For SEO and accessibility, sufficient color contrast (which Bootstrap's themes provide) is critical for readability and WCAG compliance. A well-designed color scheme improves user trust and interaction rates, while semantic color use can subtly reinforce the meaning of content (like green for success), enhancing communication.

<p class="text-muted">Muted text</p>
<p class="text-body">Body text</p>
<div class="bg-transparent border p-3">Transparent background</div>

🔹 Practical Example

A typical website layout using the grid system might include: a full-width header (.container-fluid), a main content area within a fixed .container featuring a .row with a .col-lg-8 for the article and a .col-lg-4 for the sidebar, and a footer in another .container. On smaller screens, the sidebar stacks below the article (.col-12). This example demonstrates how the grid provides structure, enforces consistency, and delivers a fully responsive design. It showcases the combination of containers, rows, responsive column classes, and the 12-unit system in a real-world scenario.

<!-- Success Alert -->
<div class="bg-success bg-opacity-10 border border-success rounded p-3">
    <h4 class="text-success">Success!</h4>
    <p class="text-success text-opacity-75 mb-0">
        Your action was completed successfully.
    </p>
</div>

<!-- Warning Alert -->
<div class="bg-warning bg-opacity-10 border border-warning rounded p-3 mt-3">
    <h4 class="text-warning">Warning!</h4>
    <p class="text-warning text-opacity-75 mb-0">
        Please review this information carefully.
    </p>
</div>

<!-- Danger Alert -->
<div class="bg-danger bg-opacity-10 border border-danger rounded p-3 mt-3">
    <h4 class="text-danger">Error!</h4>
    <p class="text-danger text-opacity-75 mb-0">
        Something went wrong. Please try again.
    </p>
</div>