SEO Optimization and Web Design

Coding for SEO
Code. Test. ReCode. Repeat.™

Coding for SEO
Code. Test. ReCode. Repeat.™

Bootstrap 5 Color Palette

Version: Bootstrap v5.0.0-alpha1

CSS Color Variables

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 5 Alert Colors

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'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