Code for SEO Code. Test. Recode. Repeat Custom Websites
Design for SEO Mobile-First. Tablet Second. Desktop Last. Responsive Design
Optimize for SEO Build for Speed. Test for Speed. Enhance for Speed. Website Optimization
Write for SEO Research. Write. Publish. Repeat. Content Marketing

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'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
PrimaryPrimary Link
SecondarySecondary Link
SuccessSuccess Link
InfoInfo Link
WarningWarning Link
DangerDanger Link
LightDanger Link
DarkDark Link SEO firm

Corporate Office: 3030 NW Expressway #200-526 | Oklahoma City, OK 73112 | By Appointment Only.
©2021 All Rights Reserved. Terms and Conditions. Privacy / Cookie Policy.