We couldn’t find anything that matched your searched term
PAGES
COMPONENTS
Brand guidelines
Insights
Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in scss/_variables.scss file.
scss/_variables.scss
Background color samples with saas variables used for each theme.
.bg-primary / --bs-primary / --bs-axa-blue
.bg-secondary / --bs-primary / --bs-axa-sienna
.bg-success / --bs-success / --bs-green
.bg-danger / --bs-danger / --bs-red
$red
.bg-warning / --bs-warning / --bs-yellow
.bg-info / --bs-info / --bs-axa-ocean
.bg-light / --bs-light / --bs-white
.bg-dark / --bs-dark /--bs-gray-800
.bg-white / --bs-white
<div class="bg-primary text-white">.bg-primary <span class="float-end">$axa-blue</span></div> <div class="bg-secondary text-white">.bg-secondary <span class="float-end">$axa-sienna</span></div> <div class="bg-success text-white">.bg-success <span class="float-end">$green</span></div> <div class="bg-danger text-white">.bg-danger <span class="float-end">$red</span></div> <div class="bg-warning text-dark">.bg-warning <span class="float-end">$yellow</span></div> <div class="bg-info text-white">.bg-info <span class="float-end">$ocean</span></div> <div class="bg-light text-dark">.bg-light <span class="float-end">$white</span></div> <div class="bg-dark text-white">.bg-dark <span class="float-end">$gray-800</span></div> <div class="bg-white text-dark">.bg-white <span class="float-end">$white</span></div> <div class="bg-transparent text-dark">.bg-transparent<div>
All colors are available as Sass variables and a Sass map in scss/_variables.scss file. To avoid increased file sizes, we don’t create text or background color classes for all of these variables. Instead, we choose a subset of these colors for a theme palette.
#fafafa