Color & background
Overview
Added in v5.2.0Color and background helpers combine the power of our .text-* utilities and .bg-* utilities in one class. Using our Sass color-contrast() function, we automatically determine a contrasting color for a particular background-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.
<div class="text-bg-primary p-3">Primary with contrasting color</div> <div class="text-bg-secondary p-3">Secondary with contrasting color</div> <div class="text-bg-success p-3">Success with contrasting color</div> <div class="text-bg-danger p-3">Danger with contrasting color</div> <div class="text-bg-warning p-3">Warning with contrasting color</div> <div class="text-bg-info p-3">Info with contrasting color</div> <div class="text-bg-light p-3">Light with contrasting color</div> <div class="text-bg-dark p-3">Dark with contrasting color</div>
With components
Use them in place of combined .text-* and .bg-* classes, like on badges:
<span class="badge text-bg-primary">Primary</span> <span class="badge text-bg-info">Info</span>
Or on cards:
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<p class="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>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<p class="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>
© 2011–2021 Twitter, Inc.
© 2011–2021 The Bootstrap Authors
Code licensed under the MIT License.
Documentation licensed under the Creative Commons Attribution License v3.0.
https://getbootstrap.com/docs/5.2/helpers/color-background/
