Background Colors

Background Colors

Bootstrap 5 also provides contextual background color classes. They fill an element with a color and pair well with text color classes for contrast.

The background classes

Example

<p class="bg-primary text-white">Primary background</p>
<p class="bg-success text-white">Success background</p>
<p class="bg-danger text-white">Danger background</p>
<p class="bg-warning">Warning background</p>

Combining background and text

It is common to pair a background color with .text-white (or .text-dark) so the text is readable:

<div class="bg-primary text-white p-3">A blue box with white text</div>

The p-3 class adds padding, which you will learn about in the utilities lesson.

TL;DR

• .bg-{color} fills an element with a color.
• Colors are semantic: success, warning, danger, info.
• Pair backgrounds with .text-white for contrast.
• .bg-light and .bg-dark control lightness.