Background

Background utilities paint an element with a theme colour, a subtle tint, the body surface or a gradient. Combine bg-{colour} with bg-opacity-* or the --bs-bg-opacity variable to fade it, and prefer the text-bg-* helpers or -emphasis text colours so contrast stays readable in light and dark mode.

1Theme colour backgrounds

bg-primary to bg-dark fill an element with a theme colour. Pair them with a readable text colour - text-bg-primary picks the one that reads on your brand colour.

bg-primary

bg-secondary

bg-success

bg-danger

bg-warning

bg-info

bg-light

bg-dark

<div class="row g-2 small">
  <div class="col-6 col-md-3">
    <div class="text-bg-primary rounded-2 p-3">
      bg-primary
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="text-bg-secondary rounded-2 p-3">
      bg-secondary
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="bg-success text-white rounded-2 p-3">
      bg-success
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="bg-danger text-white rounded-2 p-3">
      bg-danger
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="bg-warning text-dark rounded-2 p-3">
      bg-warning
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="bg-info text-dark rounded-2 p-3">
      bg-info
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="bg-light text-dark rounded-2 p-3 border">
      bg-light
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="text-bg-dark rounded-2 p-3">
      bg-dark
    </div>
  </div>
</div>

2Subtle backgrounds

The -subtle variants are soft tints that work in light and dark mode; use the matching -emphasis text colour.

bg-primary-subtle

bg-success-subtle

bg-warning-subtle

bg-danger-subtle

bg-info-subtle

<div class="d-grid gap-2">
  <div class="bg-primary-subtle text-primary-emphasis rounded-3 px-3 py-2">
    bg-primary-subtle
  </div>
  <div class="bg-success-subtle text-success-emphasis rounded-3 px-3 py-2">
    bg-success-subtle
  </div>
  <div class="bg-warning-subtle text-warning-emphasis rounded-3 px-3 py-2">
    bg-warning-subtle
  </div>
  <div class="bg-danger-subtle text-danger-emphasis rounded-3 px-3 py-2">
    bg-danger-subtle
  </div>
  <div class="bg-info-subtle text-info-emphasis rounded-3 px-3 py-2">
    bg-info-subtle
  </div>
</div>

3Body backgrounds

bg-body, bg-body-secondary and bg-body-tertiary follow the page surface and adapt to colour mode.

bg-body - the page itself

bg-body-secondary - side panels

bg-body-tertiary - wells and inputs

<div class="border rounded-4 overflow-hidden">
  <div class="bg-body p-3 border-bottom">
    <code>bg-body</code> - the page itself
  </div>
  <div class="bg-body-secondary p-3 border-bottom">
    <code>bg-body-secondary</code> - side panels
  </div>
  <div class="bg-body-tertiary p-3">
    <code>bg-body-tertiary</code> - wells and inputs
  </div>
</div>

4Text and background together

text-bg-{colour} sets the background and a contrasting text colour in one class.

text-bg-primary text-bg-warning text-bg-info text-bg-light text-bg-dark

<div class="d-flex flex-wrap gap-2">
  <span class="text-bg-primary rounded-pill px-3 py-1">text-bg-primary</span> <span class="text-bg-warning rounded-pill px-3 py-1">text-bg-warning</span> <span class="text-bg-info rounded-pill px-3 py-1">text-bg-info</span> <span class="text-bg-light rounded-pill px-3 py-1 border">text-bg-light</span> <span class="text-bg-dark rounded-pill px-3 py-1">text-bg-dark</span> 
</div>

5Background opacity steps

bg-opacity-10, -25, -50, -75 and -100 fade a theme background in fixed steps. White text needs the full colour; the labels sit under the lighter steps.

100

<div class="d-flex flex-wrap gap-3 small text-center">
  <div>
    <div class="bg-success bg-opacity-100 rounded-3 mb-1" style="width:4rem;height:3rem">
    </div>
    100
  </div>
  <div>
    <div class="bg-success bg-opacity-75 rounded-3 mb-1" style="width:4rem;height:3rem">
    </div>
    75
  </div>
  <div>
    <div class="bg-success bg-opacity-50 rounded-3 mb-1" style="width:4rem;height:3rem">
    </div>
    50
  </div>
  <div>
    <div class="bg-success bg-opacity-25 rounded-3 mb-1" style="width:4rem;height:3rem">
    </div>
    25
  </div>
  <div>
    <div class="bg-success bg-opacity-10 rounded-3 mb-1" style="width:4rem;height:3rem">
    </div>
    10
  </div>
</div>

6Gradient overlay

bg-gradient adds a soft white-to-transparent gradient on top of any bg-{colour}.

bg-primary bg-gradient

Online reservations

bg-dark bg-gradient

Online reservations

<div class="row g-2">
  <div class="col-sm-6">
    <div class="bg-primary bg-gradient text-white rounded-4 p-4">
      <div class="fw-semibold">
        bg-primary bg-gradient
      </div>
      <div class="small text-white-50">
        Online reservations
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="bg-dark bg-gradient text-white rounded-4 p-4">
      <div class="fw-semibold">
        bg-dark bg-gradient
      </div>
      <div class="small text-white-50">
        Online reservations
      </div>
    </div>
  </div>
</div>

7Transparent background

bg-transparent removes a fill, useful when a component's default background must disappear.

bg-white

bg-transparent

<div class="bg-body-tertiary rounded-3 p-3 d-flex flex-wrap gap-2">
  <div class="bg-white text-dark border rounded-2 px-3 py-2 small">
    bg-white
  </div>
  <div class="bg-transparent border rounded-2 px-3 py-2 small">
    bg-transparent
  </div>
  <button type="button" class="btn btn-light bg-transparent border-0 text-body"><i class="bi bi-three-dots" aria-hidden="true"></i> Ghost button</button>
</div>

8Black and white

bg-black and bg-white are fixed colours that do not change with colour mode, unlike bg-body.

bg-black

bg-white

<div class="d-flex rounded-3 overflow-hidden border">
  <div class="bg-black text-white flex-fill p-3 text-center small">
    bg-black
  </div>
  <div class="bg-white text-black flex-fill p-3 text-center small">
    bg-white
  </div>
</div>

9Highlighted table row

Background utilities on a table cell or row mark a selection without extra CSS.

Order	Customer	Total
#PO-5626	Ella Varga	$154.07
#TX-1911	Hana Haddad	$83.98
#PO-1176	Mason Morgan	$117.74

<div class="table-responsive">
  <table class="table table-sm mb-0 align-middle">
    <thead>
      <tr>
        <th scope="col">Order</th>
        <th scope="col">Customer</th>
        <th scope="col" class="text-end">Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>#PO-5626</td>
        <td>Ella Varga</td>
        <td class="text-end">$154.07</td>
      </tr>
      <tr>
        <td class="bg-primary-subtle">#TX-1911</td>
        <td class="bg-primary-subtle">Hana Haddad</td>
        <td class="bg-primary-subtle text-end fw-semibold">$83.98</td>
      </tr>
      <tr>
        <td>#PO-1176</td>
        <td>Mason Morgan</td>
        <td class="text-end">$117.74</td>
      </tr>
    </tbody>
  </table>
</div>

10Feature icons on tinted circles

A subtle background with rounded-circle and fixed size gives each icon a soft colour badge.

Kid friendly

Fast delivery

Online reservations

<div class="row g-3">
  <div class="col-sm-4 d-flex gap-2 align-items-center">
    <span class="bg-primary-subtle text-primary rounded-circle d-inline-flex align-items-center justify-content-center fs-5" style="width:44px;height:44px"><i class="bi bi-lightning-charge-fill" aria-hidden="true"></i></span><span class="small fw-medium">Kid friendly</span>
  </div>
  <div class="col-sm-4 d-flex gap-2 align-items-center">
    <span class="bg-success-subtle text-success rounded-circle d-inline-flex align-items-center justify-content-center fs-5" style="width:44px;height:44px"><i class="bi bi-shield-check" aria-hidden="true"></i></span><span class="small fw-medium">Fast delivery</span>
  </div>
  <div class="col-sm-4 d-flex gap-2 align-items-center">
    <span class="bg-danger-subtle text-danger rounded-circle d-inline-flex align-items-center justify-content-center fs-5" style="width:44px;height:44px"><i class="bi bi-heart-fill" aria-hidden="true"></i></span><span class="small fw-medium">Online reservations</span>
  </div>
</div>

11Section bands

Alternating bg-body and bg-body-tertiary bands separate page sections.

The neighbourhood kitchen everyone loves

Our menu changes with the seasons and the best produce from nearby farms.

Wood-fired, slow-cooked, unforgettable

Every dish is cooked to order, so tell us if you would like anything changed.

A table for every occasion

Our sommelier has paired each dish with wines from small family vineyards.

<div class="border rounded-4 overflow-hidden">
  <section class="bg-body p-4">
    <h3 class="h6 mb-1">The neighbourhood kitchen everyone loves</h3>
    <p class="small mb-0 text-body-secondary">Our menu changes with the seasons and the best produce from nearby farms.</p>
  </section>
  <section class="bg-body-tertiary p-4">
    <h3 class="h6 mb-1">Wood-fired, slow-cooked, unforgettable</h3>
    <p class="small mb-0 text-body-secondary">Every dish is cooked to order, so tell us if you would like anything changed.</p>
  </section>
  <section class="bg-body p-4">
    <h3 class="h6 mb-1">A table for every occasion</h3>
    <p class="small mb-0 text-body-secondary">Our sommelier has paired each dish with wines from small family vineyards.</p>
  </section>
</div>

12Dark footer strip

bg-dark with text-white-50 and link-light builds a compact footer.

<footer class="bg-dark text-white-50 rounded-3 p-3 d-flex flex-column flex-sm-row justify-content-between gap-2 small">
  <span>&copy; Koraara Deck</span> <span class="d-flex gap-3"><a href="#" class="link-light">Privacy</a><a href="#" class="link-light">Terms</a><a href="#" class="link-light">Contact</a></span> 
</footer>

13Alert-like message

A message strip built from bg-danger-subtle, a matching border and emphasis text.

Payment failed. Our terrace is open from spring to autumn, with heaters for cooler evenings.

<div class="bg-danger-subtle border border-danger-subtle text-danger-emphasis rounded-3 p-3 d-flex gap-2" role="alert">
  <span class="fs-5"><i class="bi bi-exclamation-octagon-fill" aria-hidden="true"></i></span> 
  <div>
    <strong>Payment failed.</strong> <span class="small">Our terrace is open from spring to autumn, with heaters for cooler evenings.</span>
  </div>
</div>

14Background on hoverable list

List items with bg-body-tertiary for the active one; other rows stay on bg-body.

Inbox
Starred
Sent
Archive

<ul class="list-unstyled border rounded-3 mb-0 overflow-hidden" style="max-width:20rem">
  <li class="px-3 py-2 bg-body border-bottom"><i class="bi bi-inbox-fill" aria-hidden="true"></i> Inbox</li>
  <li class="px-3 py-2 bg-body-tertiary border-bottom fw-semibold"><i class="bi bi-star-fill" aria-hidden="true"></i> Starred</li>
  <li class="px-3 py-2 bg-body border-bottom"><i class="bi bi-send-fill" aria-hidden="true"></i> Sent</li>
  <li class="px-3 py-2 bg-body"><i class="bi bi-archive-fill" aria-hidden="true"></i> Archive</li>
</ul>

15Progress made from backgrounds

A bg-body-secondary track and a bg-success fill with a width utility form a simple meter.

Storage75 of 100 GB

Seats5 of 20

<div class="d-grid gap-3">
  <div>
    <div class="d-flex justify-content-between small mb-1">
      <span>Storage</span><span>75 of 100 GB</span>
    </div>
    <div class="bg-body-secondary rounded-pill" style="height:8px">
      <div class="bg-success rounded-pill h-100 w-75">
      </div>
    </div>
  </div>
  <div>
    <div class="d-flex justify-content-between small mb-1">
      <span>Seats</span><span>5 of 20</span>
    </div>
    <div class="bg-body-secondary rounded-pill" style="height:8px">
      <div class="bg-warning rounded-pill h-100 w-25">
      </div>
    </div>
  </div>
</div>

16Pricing highlight

The recommended plan gets text-bg-primary (the brand colour with the text colour that reads on it); the others stay on bg-body-tertiary.

Basic

$7.40

Pro

$26.96

Team

$86.86

<div class="row g-2 text-center">
  <div class="col-4">
    <div class="bg-body-tertiary rounded-3 p-3">
      <div class="small">
        Basic
      </div>
      <div class="fs-5 fw-bold">
        $7.40
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="text-bg-primary rounded-3 p-3">
      <div class="small">
        Pro
      </div>
      <div class="fs-5 fw-bold">
        $26.96
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="bg-body-tertiary rounded-3 p-3">
      <div class="small">
        Team
      </div>
      <div class="fs-5 fw-bold">
        $86.86
      </div>
    </div>
  </div>
</div>

17Colour swatches

Square swatches with bg-{colour} and a caption below, as used in a style guide.

Primary

Secondary

Success

Warning

Surface

<div class="d-flex flex-wrap gap-3">
  <figure class="mb-0 text-center">
    <div class="bg-primary rounded-3" style="width:56px;height:56px">
    </div>
    <figcaption class="small mt-1">Primary</figcaption>
  </figure>
  <figure class="mb-0 text-center">
    <div class="bg-secondary rounded-3" style="width:56px;height:56px">
    </div>
    <figcaption class="small mt-1">Secondary</figcaption>
  </figure>
  <figure class="mb-0 text-center">
    <div class="bg-success rounded-3" style="width:56px;height:56px">
    </div>
    <figcaption class="small mt-1">Success</figcaption>
  </figure>
  <figure class="mb-0 text-center">
    <div class="bg-warning rounded-3" style="width:56px;height:56px">
    </div>
    <figcaption class="small mt-1">Warning</figcaption>
  </figure>
  <figure class="mb-0 text-center">
    <div class="bg-body-secondary border rounded-3" style="width:56px;height:56px">
    </div>
    <figcaption class="small mt-1">Surface</figcaption>
  </figure>
</div>

18Card header and footer tints

bg-body-tertiary on the header and footer of a card, bg-body in the middle.

Looking back at a busy season

Children are always welcome, with a menu made just for them.

Updated 55 min ago

<div class="border rounded-3 overflow-hidden" style="max-width:24rem">
  <div class="bg-body-tertiary px-3 py-2 border-bottom fw-semibold small">
    Looking back at a busy season
  </div>
  <div class="bg-body p-3 small">
    Children are always welcome, with a menu made just for them.
  </div>
  <div class="bg-body-tertiary px-3 py-2 border-top small text-body-secondary">
    Updated 55 min ago
  </div>
</div>

19Image scrim with bg-black

A bg-black layer at reduced --bs-bg-opacity makes white text readable over a photo.

Dinner worth getting dressed up for

<div class="position-relative rounded-4 overflow-hidden" style="max-width:28rem">
  <img src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&w=1600&h=700&q=70" alt="Taste the city&#39;s favourite kitchen" class="w-100 d-block"> 
  <div class="position-absolute top-0 start-0 w-100 h-100 bg-black d-flex align-items-center justify-content-center" style="--bs-bg-opacity:.45">
    <span class="text-white fs-5 fw-semibold text-center px-3">Dinner worth getting dressed up for</span> 
  </div>
</div>

20Chat bubbles

Incoming messages on bg-body-tertiary, outgoing on bg-primary, each with a rounded corner set.

We measure success by how many guests come back and tell their friends.

Start in minutes and get help from a real person whenever you need it.

Our team has done this many times, so you never have to guess.

<div class="d-flex flex-column gap-2" style="max-width:24rem">
  <div class="align-self-start bg-body-tertiary rounded-4 rounded-bottom-0 px-3 py-2 small">
    We measure success by how many guests come back and tell their friends.
  </div>
  <div class="align-self-end text-bg-primary rounded-4 rounded-bottom-0 px-3 py-2 small">
    Start in minutes and get help from a real person whenever you need it.
  </div>
  <div class="align-self-start bg-body-tertiary rounded-4 rounded-bottom-0 px-3 py-2 small">
    Our team has done this many times, so you never have to guess.
  </div>
</div>