
Bootstrap 5 Color Palette
CSS Color Variables
Bootstrap includes a number of built-in CSS classes that provide basic styling for common elements, such as buttons, forms, and tables. However, Bootstrap's default styles may not always conform to your company's branding guidelines. Luckily, Bootstrap provides an easy way to customize its styles using CSS variables. By overridding the default values of Bootstrap's 21 color variables (and adding your own as needed), you can create CSS that conforms to your corporate identity guide.
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.
--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 5 Alert Colors
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 |
Corporate Office: 3030 NW Expressway #200-526 | Oklahoma City, OK 73112 | By Appointment Only.
©2021 slamdunkmarketing.com. All Rights Reserved. Terms and Conditions. Privacy / Cookie Policy.