Skip to content

Bootstrap Colors Explained — Color System and Utilities

DodaTech Updated 2026-06-28 1 min read

In this tutorial, you will learn about Bootstrap Colors Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap provides a comprehensive color system with theme colors, text colors, background utilities, and opacity modifiers for consistent visual design.

What You'll Learn

  • Theme color palette
  • Text color utilities
  • Background color utilities
  • Opacity modifiers
  • Link color utilities

Why It Matters

The color system ensures consistent branding across components. Semantic color names (danger, warning, success) communicate meaning without custom CSS.

<div class="container mt-4">
  <h2>Text Colors</h2>
  <p class="text-primary">.text-primary</p>
  <p class="text-secondary">.text-secondary</p>
  <p class="text-success">.text-success</p>
  <p class="text-danger">.text-danger</p>
  <p class="text-warning">.text-warning</p>
  <p class="text-info">.text-info</p>
  <p class="text-light bg-dark">.text-light</p>
  <p class="text-dark">.text-dark</p>
  <p class="text-muted">.text-muted</p>
  <p class="text-white bg-dark">.text-white</p>
  <p class="text-body">.text-body</p>

  <h2>Background Colors</h2>
  <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
  <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
  <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
  <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
  <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
  <div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
  <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
  <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
  <div class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</div>

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

Expected output: Semantic text colors, background colors, and opacity variations for consistent visual communication.

← Previous Bootstrap Typography Explained — Text and Headings Next → Bootstrap Spacing Explained — Margin Padding and Gap Utilities

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap