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

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