Created
March 21, 2026 04:19
-
-
Save joe-oli/650ca6f1d5e0f35cba2e6b754c0b334c to your computer and use it in GitHub Desktop.
Bootstrap named colors
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Bootstrap 5 — Named Theme Colors</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap'); | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: 'DM Sans', sans-serif; | |
| background: #f4f2ee; | |
| color: #1a1a18; | |
| min-height: 100vh; | |
| padding: 48px 32px; | |
| } | |
| header { | |
| max-width: 900px; | |
| margin: 0 auto 40px; | |
| display: flex; | |
| align-items: baseline; | |
| gap: 16px; | |
| border-bottom: 1.5px solid #d6d3cd; | |
| padding-bottom: 20px; | |
| } | |
| header h1 { | |
| font-size: 22px; | |
| font-weight: 500; | |
| letter-spacing: -0.3px; | |
| } | |
| header span { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 12px; | |
| color: #888; | |
| } | |
| .grid { | |
| max-width: 900px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); | |
| gap: 14px; | |
| } | |
| .card { | |
| border-radius: 12px; | |
| overflow: hidden; | |
| background: #fff; | |
| border: 1px solid rgba(0,0,0,0.07); | |
| transition: transform 0.15s ease, box-shadow 0.15s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 24px rgba(0,0,0,0.09); | |
| } | |
| .swatch { | |
| height: 88px; | |
| display: flex; | |
| align-items: flex-end; | |
| padding: 10px 14px; | |
| } | |
| .swatch-hex { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 12px; | |
| font-weight: 500; | |
| opacity: 0.8; | |
| } | |
| .info { | |
| padding: 12px 14px 14px; | |
| border-top: 1px solid rgba(0,0,0,0.06); | |
| } | |
| .name { | |
| font-size: 15px; | |
| font-weight: 500; | |
| letter-spacing: -0.1px; | |
| } | |
| .usage { | |
| font-size: 12px; | |
| color: #777; | |
| margin-top: 3px; | |
| line-height: 1.5; | |
| } | |
| .pills { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 5px; | |
| margin-top: 10px; | |
| } | |
| .pill { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 11px; | |
| padding: 3px 8px; | |
| border-radius: 5px; | |
| background: #f4f2ee; | |
| color: #555; | |
| border: 1px solid #e0ddd8; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Bootstrap 5 — Theme Colors</h1> | |
| <span>v5.3 · 8 named colors</span> | |
| </header> | |
| <div class="grid"> | |
| <div class="card"> | |
| <div class="swatch" style="background:#0d6efd;"> | |
| <span class="swatch-hex" style="color:#fff;">#0d6efd</span> | |
| </div> | |
| <div class="info"> | |
| <div class="name">Primary</div> | |
| <div class="usage">Main brand action — buttons, links, focus rings</div> | |
| <div class="pills"> | |
| <span class="pill">bg-primary</span> | |
| <span class="pill">text-primary</span> | |
| <span class="pill">btn-primary</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="swatch" style="background:#6c757d;"> | |
| <span class="swatch-hex" style="color:#fff;">#6c757d</span> | |
| </div> | |
| <div class="info"> | |
| <div class="name">Secondary</div> | |
| <div class="usage">Muted / alternative actions and labels</div> | |
| <div class="pills"> | |
| <span class="pill">bg-secondary</span> | |
| <span class="pill">text-secondary</span> | |
| <span class="pill">btn-secondary</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="swatch" style="background:#198754;"> | |
| <span class="swatch-hex" style="color:#fff;">#198754</span> | |
| </div> | |
| <div class="info"> | |
| <div class="name">Success</div> | |
| <div class="usage">Positive feedback — confirmations, valid states</div> | |
| <div class="pills"> | |
| <span class="pill">bg-success</span> | |
| <span class="pill">text-success</span> | |
| <span class="pill">alert-success</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="swatch" style="background:#dc3545;"> | |
| <span class="swatch-hex" style="color:#fff;">#dc3545</span> | |
| </div> | |
| <div class="info"> | |
| <div class="name">Danger</div> | |
| <div class="usage">Errors, destructive actions, invalid states</div> | |
| <div class="pills"> | |
| <span class="pill">bg-danger</span> | |
| <span class="pill">text-danger</span> | |
| <span class="pill">alert-danger</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="swatch" style="background:#ffc107;"> | |
| <span class="swatch-hex" style="color:#333;">#ffc107</span> | |
| </div> | |
| <div class="info"> | |
| <div class="name">Warning</div> | |
| <div class="usage">Cautions, non-critical alerts, watch states</div> | |
| <div class="pills"> | |
| <span class="pill">bg-warning</span> | |
| <span class="pill">text-warning</span> | |
| <span class="pill">alert-warning</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="swatch" style="background:#0dcaf0;"> | |
| <span class="swatch-hex" style="color:#0a5464;">#0dcaf0</span> | |
| </div> | |
| <div class="info"> | |
| <div class="name">Info</div> | |
| <div class="usage">Informational messages and neutral notices</div> | |
| <div class="pills"> | |
| <span class="pill">bg-info</span> | |
| <span class="pill">text-info</span> | |
| <span class="pill">alert-info</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="swatch" style="background:#f8f9fa; border-bottom: 1px solid #dee2e6;"> | |
| <span class="swatch-hex" style="color:#6c757d;">#f8f9fa</span> | |
| </div> | |
| <div class="info"> | |
| <div class="name">Light</div> | |
| <div class="usage">Subtle backgrounds, off-white surfaces</div> | |
| <div class="pills"> | |
| <span class="pill">bg-light</span> | |
| <span class="pill">text-light</span> | |
| <span class="pill">btn-light</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="swatch" style="background:#212529;"> | |
| <span class="swatch-hex" style="color:#fff;">#212529</span> | |
| </div> | |
| <div class="info"> | |
| <div class="name">Dark</div> | |
| <div class="usage">High-contrast text, dark navbars and footers</div> | |
| <div class="pills"> | |
| <span class="pill">bg-dark</span> | |
| <span class="pill">text-dark</span> | |
| <span class="pill">btn-dark</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
| <!-- | |
| Bootstrap 5.3 (the latest version) has 8 named theme colors, shown above. Each maps to a Sass variable and generates utility classes like `bg-*`, `text-*`, `btn-*`, `alert-*`, and more throughout the component library. | |
| A quick summary of their intent: | |
| - **Primary** — your main brand color, used for the most important interactive elements | |
| - **Secondary** — muted/alternative actions | |
| - **Success / Danger / Warning / Info** — semantic feedback states (green, red, yellow, cyan) | |
| - **Light / Dark** — near-white and near-black for surfaces and high-contrast areas | |
| Bootstrap v5.3 also added a new layer of CSS variables alongside these — things like `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` — to make it easier to support light and dark color modes. These extend the theme colors but don't replace them. | |
| All 8 are fully customizable via Sass — you can remap any of them to whatever hex value fits your brand. | |
| --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment