Miva Merchant Development by Scot's Scripts

BOOTSTRAP: Color Palette Usage

Miva Knowledge Base
BOOTSTRAP: Color Palette Usage
Important Notice: This information is for internal reference only. Use at your own risk.
Does Google actually understand your Miva Merchant store? Our JSON-LD schema generator makes sure it does. Contact us to get started. (more info)

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