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.

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.