Bootstrap 5 includes 21 color variables in its css code. To style your css selector with the vaiable --bs-blue, use var(--bs-blue). CSS Example: .bg-blue { background-color:var(--bs-blue);}. Color variables are set within */:root of the Bootstrap 5 CSS file. Modifying Bootstrap's built-in color variables is an easy way to match-up your website's colors with your corporate identity color guidelines. Below reflects the color variables in Bootstrap v5.0.0-alpha1.
| --bs-blue #007bff | --bs-indigo #6610f2 | --bs-purple #6f42c1 | --bs-pink #e83e8c | --bs-red #dc3545 | --bs-orange #fd7e14 | --bs-yellow #ffc107 | --bs-green #28a745 | --bs-teal #20c997 | --bs-cyan #17a2b8 | --bs-white #adb5bd |
| --bs-gray #6c757d | --bs-gray-dark #343a40 | --bs-primary #0d6efd | --bs-secondary #6c757d | --bs-success #28a745 | --bs-info #17a2b8 | --bs-warning #ffc107 | --bs-danger #dc3545 | --bs-light #f8f9fa | --bs-dark #343a40 |
Bootstrap v5.0.0-alpha1 is not taking full advantage of the color variables established in its css root selector. Bootstrap 5 colors are still hard-coded hexdecimal and rgba colors within the css for the majority of selectors including alerts. Use slamdunkmarketing.com's free Bootstrap 5 Color Selector Tool to modify Bootstrap 5 css to eliminate excessive color options and conform to your corporate identity guidelines.
| Palette | Background Color | Table Striped - Stripe Background | Link/Hover Color | Button Color |
|---|---|---|---|---|
| Primary | Primary Link | |||
| Secondary | Secondary Link | |||
| Success | Success Link | |||
| Info | Info Link | |||
| Warning | Warning Link | |||
| Danger | Danger Link | |||
| Light | Danger Link | |||
| Dark | Dark Link |