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 --ui-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

No hidden fees

bg-dark bg-gradient

No hidden fees

<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">
        No hidden fees
      </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">
        No hidden fees
      </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
#INV-5805	Sofia Lindqvist	$293.29
#PO-9419	Nora Patel	$381.36
#INV-4935	Owen Ibrahim	$118.17

<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>#INV-5805</td>
        <td>Sofia Lindqvist</td>
        <td class="text-end">$293.29</td>
      </tr>
      <tr>
        <td class="bg-primary-subtle">#PO-9419</td>
        <td class="bg-primary-subtle">Nora Patel</td>
        <td class="bg-primary-subtle text-end fw-semibold">$381.36</td>
      </tr>
      <tr>
        <td>#INV-4935</td>
        <td>Owen Ibrahim</td>
        <td class="text-end">$118.17</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.

Spending limits

No hidden fees

Accounting sync

<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">Spending limits</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">No hidden fees</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">Accounting sync</span>
  </div>
</div>

11Section bands

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

Take control of your cash flow

Payroll runs on time, with tax and pension payments handled for you.

Banking built for the way you work

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

One account for every currency

Cash flow forecasts show where you will be next month, not just today.

<div class="border rounded-4 overflow-hidden">
  <section class="bg-body p-4">
    <h3 class="h6 mb-1">Take control of your cash flow</h3>
    <p class="small mb-0 text-body-secondary">Payroll runs on time, with tax and pension payments handled for you.</p>
  </section>
  <section class="bg-body-tertiary p-4">
    <h3 class="h6 mb-1">Banking built for the way you work</h3>
    <p class="small mb-0 text-body-secondary">We measure success by how many members come back and tell their friends.</p>
  </section>
  <section class="bg-body p-4">
    <h3 class="h6 mb-1">One account for every currency</h3>
    <p class="small mb-0 text-body-secondary">Cash flow forecasts show where you will be next month, not just today.</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; Cora HQ</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. Invoices go out with a payment link, so customers can pay you in one click.

<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">Invoices go out with a payment link, so customers can pay you in one click.</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.90

Pro

$27.90

Team

$87.28

<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.90
      </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">
        $27.90
      </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">
        $87.28
      </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.

A beginner's guide to getting started

Cash flow forecasts show where you will be next month, not just today.

Updated 6 days 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">
    A beginner&#39;s guide to getting started
  </div>
  <div class="bg-body p-3 small">
    Cash flow forecasts show where you will be next month, not just today.
  </div>
  <div class="bg-body-tertiary px-3 py-2 border-top small text-body-secondary">
    Updated 6 days ago
  </div>
</div>

19Image scrim with bg-black

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

Get paid faster, pay out with ease

<div class="position-relative rounded-4 overflow-hidden" style="max-width:28rem">
  <img src="https://images.unsplash.com/photo-1688380692117-63178554d76d?auto=format&fit=crop&w=1600&h=700&q=70" alt="Spend smarter, close the books faster" 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="--ui-bg-opacity:.45">
    <span class="text-white fs-5 fw-semibold text-center px-3">Get paid faster, pay out with ease</span> 
  </div>
</div>

20Chat bubbles

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

Open a business account online in about ten minutes, with no branch visit.

Every detail is handled by people who care about getting it right.

No monthly fees on the basic plan and no hidden charges on transfers.

<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">
    Open a business account online in about ten minutes, with no branch visit.
  </div>
  <div class="align-self-end text-bg-primary rounded-4 rounded-bottom-0 px-3 py-2 small">
    Every detail is handled by people who care about getting it right.
  </div>
  <div class="align-self-start bg-body-tertiary rounded-4 rounded-bottom-0 px-3 py-2 small">
    No monthly fees on the basic plan and no hidden charges on transfers.
  </div>
</div>