BOOTSTRAP: Color Palette Usage

Miva Knowledge Base
Want to start an online store? We work with you from start to finish, from commerce platform to design to SEO.
Experience counts, and we have a lot.
Important Notice: This information is for internal reference only. Use at your own risk.

BOOTSTRAP: Color Palette Usage

Scot Ranney • February 22, 2024


Bootstrap has a LOT of colors, not just primary, secondary, etc...

https://getbootstrap.com/docs/5.3/customize/color/#theme-colors

The current Bootstrap 5 list of colors (should work for Bootstrap 4 as well.)

bootstrap color palette colors
:root {
	--bs-blue: #0d6efd;
	--bs-indigo: #6610f2;
	--bs-purple: #6f42c1;
	--bs-pink: #d63384;
	--bs-red: #dc3545;
	--bs-orange: #fd7e14;
	--bs-yellow: #ffc107;
	--bs-green: #198754;
	--bs-teal: #20c997;
	--bs-cyan: #0dcaf0;
	--bs-white: #fff;
	--bs-gray: #6c757d;
	--bs-gray-dark: #343a40;
	--bs-primary: #0d6efd;
	--bs-secondary: #6c757d;
	--bs-success: #198754;
	--bs-info: #0dcaf0;
	--bs-warning: #ffc107;
	--bs-danger: #dc3545;
	--bs-light: #f8f9fa;
	--bs-dark: #212529;
	--bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	--bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
	--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

To use them you set up a class and then call it. For example, indigo:

<style>
	.text-indigo { color: var(--bs-indigo); }
</style>
<div class="text-indigo">This would render in indigo color.</div>

https://www.scotsscripts.com/mvblog/bootstrap-color-palette-usage.html

mvkb_bootstrap