Miva Merchant Development by Scot's Scripts

BOOTSTRAP: Color Palette Usage

Miva Random Code Trivia

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.

WARNING:

This information is offered "AS IS" for internal reference only. Use at your own risk.
Does AI actually understand your Miva Merchant store? Our smart JSON-LD schema generator makes sure it does. Contact us to get started. (more info)
SEO Audit & Inquiries • News & Updates • SEO for Miva Merchant

BOOTSTRAP: Color Palette Usage

THIS CODE IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED;
THE AUTHOR DISCLAIMS ALL LIABILITY FOR ANY DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR STORE DISRUPTIONS ARISING FROM ITS USE.

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

bootstrap