Bootstrap5 Background Colors

Use bg-* classes to apply different background colors.

1. Bootstrap 5 Background Color Classes (bg-*)

You can use text-* classes to apply different colors to text.

  • bg-primary → Blue
  • bg-secondary → Gray
  • bg-success → Green
  • bg-danger → Red
  • bg-warning → Yellow
  • bg-info → Cyan
  • bg-light → Light Gray
  • bg-dark → Dark Gray
  • bg-body → Default Background Color
  • bg-white → White Background
  • bg-transparent → Transparent Background

Example:

HTML
<div class="p-3 bg-primary text-white">Primary Background</div>
<div class="p-3 bg-secondary text-white">Secondary Background</div>
<div class="p-3 bg-success text-white">Success Background</div>
<div class="p-3 bg-danger text-white">Danger Background</div>
<div class="p-3 bg-warning text-dark">Warning Background</div>
<div class="p-3 bg-info text-dark">Info Background</div>
<div class="p-3 bg-dark text-white">Dark Background</div>
<div class="p-3 bg-light text-dark">Light Background</div>

Output:

2. Background Opacity (bg-opacity-*)

You can control the opacity of background colors using bg-opacity-* classes.

  • bg-opacity-10 → 10% opacity
  • bg-opacity-25 → 25% opacity
  • bg-opacity-50 → 50% opacity
  • bg-opacity-75 → 75% opacity
  • bg-opacity-100 → 100% opacity (default)

Example:

HTML
  <div class="p-3 bg-danger bg-opacity-10">Danger with 10% Opacity</div>
  <div class="p-3 bg-danger bg-opacity-25">Danger with 25% Opacity</div>
  <div class="p-3 bg-danger bg-opacity-50">Danger with 50% Opacity</div>
  <div class="p-3 bg-danger bg-opacity-75">Danger with 75% Opacity</div>

Output:

3. Text Background Colors (text-bg-*)

Use text-bg-* classes to apply a background color directly to text elements. This is different from bg-* because it also ensures better text contrast.

  • text-bg-primary
  • text-bg-secondary
  • text-bg-success
  • text-bg-danger
  • text-bg-warning
  • text-bg-info
  • text-bg-light
  • text-bg-dark

Example:

HTML
<p class="text-bg-primary">This is primary text with background</p>
<p class="text-bg-success">This is success text with background</p>
<p class="text-bg-danger">This is danger text with background</p>
<p class="text-bg-warning">This is warning text with background</p>
<p class="text-bg-dark text-white">This is dark text with background</p>

Output:

PreviousNext