Bootstrap 5 Color &Amp; Background
Color & background
Set a background color with contrasting foreground color.
🤖 Looking for the LLM-optimized version?View llm.md
On this page
Overview
Added in v4.2.6Color and background helpers combine the power of our.text-* utilities and.bg-* utilities in one class. Using our Sasscolor-contrast() function, we automatically determine a contrastingcolor for a particularbackground-color.
Heads up! There’s currently no support for a CSS-native
color-contrast function, so we use our own via Sass. This means that customizing our theme colors via CSS variables may cause color contrast issues with these utilities.Primary with contrasting color
Secondary with contrasting color
Success with contrasting color
Danger with contrasting color
Warning with contrasting color
Info with contrasting color
Light with contrasting color
Dark with contrasting color
html
<divclass="text-bg-primary p-3">Primary with contrasting color</div><divclass="text-bg-secondary p-3">Secondary with contrasting color</div><divclass="text-bg-success p-3">Success with contrasting color</div><divclass="text-bg-danger p-3">Danger with contrasting color</div><divclass="text-bg-warning p-3">Warning with contrasting color</div><divclass="text-bg-info p-3">Info with contrasting color</div><divclass="text-bg-light p-3">Light with contrasting color</div><divclass="text-bg-dark p-3">Dark with contrasting color</div>With components
Use them in place of combined.text-* and.bg-* classes, like onbadges:
PrimaryInfo
html
<spanclass="badge text-bg-primary">Primary</span><spanclass="badge text-bg-info">Info</span>Or oncards:
Header
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Some quick example text to build on the card title and make up the bulk of the card's content.
html
<divclass="card text-bg-primary mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div></div><divclass="card text-bg-info mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div></div>