Utility API

Utilities are single-purpose classes that you combine directly in markup. Stack several on one element, add a breakpoint infix such as d-md-flex to change behaviour from a screen size up, and tune colour states through CSS variables like --ui-bg-opacity, --ui-border-opacity and --ui-link-opacity. The recipes below build complete interface pieces without writing any custom CSS.

1A card made only of utilities

Background, border, radius, padding and shadow utilities stacked on a plain div give you a card without the card component.

Payroll

Take control of your cash flow

Our business accounts brings you focused on what matters for teams of every size.

<div class="bg-body border rounded-3 p-3 shadow-sm" style="max-width:22rem">
  <p class="small text-body-secondary text-uppercase fw-semibold mb-1">Payroll</p>
  <h3 class="h5 mb-2">Take control of your cash flow</h3>
  <p class="mb-0 text-body-secondary">Our business accounts brings you focused on what matters for teams of every size.</p>
</div>

2Responsive display: d-none d-md-flex

Breakpoint infixes switch a utility on from a screen size up. Resize the window: the toolbar row appears from md, the compact button below it.

d-none d-md-flex and d-flex d-md-none

<div class="border rounded-3 p-3 bg-body-tertiary">
  <div class="d-none d-md-flex gap-2">
    <button type="button" class="btn btn-sm btn-primary"><i class="bi bi-pencil-square" aria-hidden="true"></i> Edit</button>
    <button type="button" class="btn btn-sm btn-outline-secondary"><i class="bi bi-share" aria-hidden="true"></i> Share</button>
    <button type="button" class="btn btn-sm btn-outline-danger"><i class="bi bi-trash3" aria-hidden="true"></i> Delete</button>
  </div>
  <div class="d-flex d-md-none">
    <button type="button" class="btn btn-sm btn-primary w-100"><i class="bi bi-three-dots" aria-hidden="true"></i> Actions</button>
  </div>
  <p class="small text-body-secondary mt-2 mb-0"><code>d-none d-md-flex</code> and <code>d-flex d-md-none</code></p>
</div>

3State via --ui-bg-opacity

Every bg-{colour} reads the --ui-bg-opacity variable, so one inline variable fades the fill while the text stays fully opaque.

.35

.15

.05

<div class="d-flex flex-wrap gap-2">
  <div class="bg-primary text-white rounded-2 px-3 py-2" style="--ui-bg-opacity:1">
    1
  </div>
  <div class="bg-primary rounded-2 px-3 py-2" style="--ui-bg-opacity:.6">
    .6
  </div>
  <div class="bg-primary rounded-2 px-3 py-2" style="--ui-bg-opacity:.35">
    .35
  </div>
  <div class="bg-primary rounded-2 px-3 py-2" style="--ui-bg-opacity:.15">
    .15
  </div>
  <div class="bg-primary rounded-2 px-3 py-2" style="--ui-bg-opacity:.05">
    .05
  </div>
</div>

4State via --ui-border-opacity

Border colour utilities read --ui-border-opacity; set it inline for values between the border-opacity-* steps.

<div class="row g-2">
  <div class="col-6 col-md-3">
    <div class="border border-2 border-success rounded-3 p-3 text-center small" style="--ui-border-opacity:1">
      1
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border border-2 border-success rounded-3 p-3 text-center small" style="--ui-border-opacity:.6">
      .6
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border border-2 border-success rounded-3 p-3 text-center small" style="--ui-border-opacity:.3">
      .3
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border border-2 border-success rounded-3 p-3 text-center small" style="--ui-border-opacity:.1">
      .1
    </div>
  </div>
</div>

5State via --ui-link-opacity

Coloured links read --ui-link-opacity. Combine it with the -hover utilities for a link that brightens on hover.

Payroll --ui-link-opacity:.5
Accounting sync 50, 100 on hover
Smarter payments for growing companies link-opacity-75

<ul class="list-unstyled mb-0 d-grid gap-2">
  <li><a href="#" class="link-primary" style="--ui-link-opacity:.5">Payroll</a> <span class="small text-body-secondary">--ui-link-opacity:.5</span></li>
  <li><a href="#" class="link-primary link-opacity-50 link-opacity-100-hover">Accounting sync</a> <span class="small text-body-secondary">50, 100 on hover</span></li>
  <li><a href="#" class="link-danger link-opacity-75">Smarter payments for growing companies</a> <span class="small text-body-secondary">link-opacity-75</span></li>
</ul>

6Media object

d-flex with gap, flex-shrink-0 on the image and flex-grow-1 on the text is the classic comment or list row.

Ravi Alvarez21 min ago

A focused plan connects new ideas to life without extra tools.

<div class="d-flex gap-3 align-items-start border rounded-3 p-3">
  <img src="../assets/img/avatar-1.svg" alt="Ravi Alvarez" width="48" height="48" class="rounded-circle flex-shrink-0"> 
  <div class="flex-grow-1">
    <div class="d-flex justify-content-between">
      <strong>Ravi Alvarez</strong><small class="text-body-secondary">21 min ago</small>
    </div>
    <p class="mb-0 small">A focused plan connects new ideas to life without extra tools.</p>
  </div>
</div>

7Status badges without the badge component

Subtle backgrounds, emphasis text, small padding and rounded-pill compose a soft status label.

Active Pending Blocked

<div class="d-flex flex-wrap gap-2">
  <span class="d-inline-flex align-items-center gap-1 px-2 py-1 rounded-pill small fw-medium bg-success-subtle text-success-emphasis border border-success-subtle"><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Active</span> <span class="d-inline-flex align-items-center gap-1 px-2 py-1 rounded-pill small fw-medium bg-warning-subtle text-warning-emphasis border border-warning-subtle"><i class="bi bi-clock" aria-hidden="true"></i> Pending</span> <span class="d-inline-flex align-items-center gap-1 px-2 py-1 rounded-pill small fw-medium bg-danger-subtle text-danger-emphasis border border-danger-subtle"><i class="bi bi-x-circle-fill" aria-hidden="true"></i> Blocked</span> 
</div>

8Stat tile

Font size, weight, line height and colour utilities turn three lines of text into a dashboard metric.

Revenue

$38,367.56

+68% this month

Customers

7.0k

-2% this month

<div class="row g-3">
  <div class="col-sm-6 col-lg-4">
    <div class="p-3 rounded-4 bg-body-tertiary border">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <span class="small text-body-secondary fw-medium">Revenue</span><span class="text-primary fs-5"><i class="bi bi-graph-up-arrow" aria-hidden="true"></i></span>
      </div>
      <div class="fs-3 fw-bold lh-1">
        $38,367.56
      </div>
      <div class="small text-success mt-1">
        <i class="bi bi-arrow-up" aria-hidden="true"></i> +68% this month
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <div class="p-3 rounded-4 bg-body-tertiary border">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <span class="small text-body-secondary fw-medium">Customers</span><span class="text-info fs-5"><i class="bi bi-people" aria-hidden="true"></i></span>
      </div>
      <div class="fs-3 fw-bold lh-1">
        7.0k
      </div>
      <div class="small text-danger mt-1">
        <i class="bi bi-arrow-down" aria-hidden="true"></i> -2% this month
      </div>
    </div>
  </div>
</div>

9Avatar with a status dot

position-relative on the wrapper, then position-absolute, bottom-0 / end-0 and a white border for the online dot.

<div class="d-flex gap-4 align-items-center">
  <div class="position-relative d-inline-block">
    <img src="../assets/img/avatar-11.svg" alt="Mia Lindqvist" width="56" height="56" class="rounded-circle"> <span class="position-absolute bottom-0 end-0 p-2 bg-success border border-2 border-white rounded-circle"><span class="visually-hidden">Online</span></span> 
  </div>
  <div class="position-relative d-inline-block">
    <img src="../assets/img/avatar-1.svg" alt="Liam Kim" width="56" height="56" class="rounded-circle"> <span class="position-absolute bottom-0 end-0 p-2 bg-secondary border border-2 border-white rounded-circle"><span class="visually-hidden">Away</span></span> 
  </div>
</div>

10Responsive alignment

text-center on phones and text-md-start from md: a hero block that centres only where it should.

Take control of your cash flow

A secure experience shows every detail in view with friendly support.

Get started

<div class="p-4 rounded-4 bg-primary-subtle text-center text-md-start">
  <h3 class="h4 fw-bold text-primary-emphasis">Take control of your cash flow</h3>
  <p class="mb-3 text-primary-emphasis">A secure experience shows every detail in view with friendly support.</p>
  <a href="#" class="btn btn-primary">Get started</a> 
</div>

11Stack on phones, row on tablets

flex-column flex-md-row with gap-3: three blocks stack on small screens and line up from md.

Bank-grade encryption

24/7 support

<div class="d-flex flex-column flex-md-row gap-3">
  <div class="flex-fill p-3 rounded-3 border bg-body-tertiary">
    <i class="bi bi-lightning-charge-fill" aria-hidden="true"></i> <strong>Bank-grade encryption</strong>
  </div>
  <div class="flex-fill p-3 rounded-3 border bg-body-tertiary">
    <i class="bi bi-shield-check" aria-hidden="true"></i> <strong>Bank-grade encryption</strong>
  </div>
  <div class="flex-fill p-3 rounded-3 border bg-body-tertiary">
    <i class="bi bi-cloud-arrow-up" aria-hidden="true"></i> <strong>24/7 support</strong>
  </div>
</div>

12Callout from border-start

A single side border with a thick width and a theme colour makes a note or warning callout.

Heads up

This honest story lets projects moving forward from the very first day.

<div class="border-start border-4 border-warning bg-warning-subtle rounded-end-3 p-3">
  <div class="fw-semibold text-warning-emphasis mb-1">
    <i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i> Heads up
  </div>
  <p class="mb-0 small text-warning-emphasis">This honest story lets projects moving forward from the very first day.</p>
</div>

13Settings row

justify-content-between and align-items-center place a label on the left and a control on the right.

Email alerts

Daily summary at 09:15

Push notifications

Only mentions

Off

<div class="border rounded-3">
  <div class="d-flex justify-content-between align-items-center p-3 border-bottom">
    <div>
      <div class="fw-medium">
        Email alerts
      </div>
      <div class="small text-body-secondary">
        Daily summary at 09:15
      </div>
    </div>
    <span class="px-2 py-1 rounded-pill small bg-success text-white">On</span> 
  </div>
  <div class="d-flex justify-content-between align-items-center p-3">
    <div>
      <div class="fw-medium">
        Push notifications
      </div>
      <div class="small text-body-secondary">
        Only mentions
      </div>
    </div>
    <span class="px-2 py-1 rounded-pill small bg-body-secondary text-body-secondary">Off</span> 
  </div>
</div>

14Announcement bar

text-bg-dark sets a contrasting text colour with the background; small and gap utilities do the rest.

New Banking built for the way you work Read more

<div class="text-bg-dark rounded-3 px-3 py-2 d-flex flex-wrap align-items-center justify-content-center gap-2 small">
  <span class="badge text-bg-warning">New</span> <span>Banking built for the way you work</span> <a href="#" class="link-light link-offset-2 fw-semibold">Read more</a> 
</div>

15Filter chips that wrap

flex-wrap with gap-2 lets a row of chips flow onto new lines without margin hacks.

All how-to Cards flexible idea

<div class="d-flex flex-wrap gap-2">
  <span class="px-3 py-1 rounded-pill bg-primary text-white small">All</span> <span class="px-3 py-1 rounded-pill border small">how-to</span> <span class="px-3 py-1 rounded-pill border small">Cards</span> <span class="px-3 py-1 rounded-pill border small">flexible</span> <span class="px-3 py-1 rounded-pill border small">idea</span> 
</div>

16Product line item

A thumbnail, a truncated title and a right-aligned price: overflow-hidden on the middle column lets text-truncate work in flex.

Virtual card - powerful edition

Payroll

$224.00

<div class="d-flex align-items-center gap-3 border rounded-3 p-2" style="max-width:28rem">
  <img src="../assets/img/product-9.svg" alt="Virtual card" width="56" height="56" class="rounded-2 object-fit-cover flex-shrink-0"> 
  <div class="flex-grow-1 overflow-hidden">
    <div class="fw-medium text-truncate">
      Virtual card - powerful edition
    </div>
    <div class="small text-body-secondary">
      Payroll
    </div>
  </div>
  <div class="fw-bold text-nowrap">
    $224.00
  </div>
</div>

17Responsive spacing

p-2 p-md-4 and mb-2 mb-md-3: tighter padding on phones, roomier from md, no media query needed.

Inside the powerful story

A smart idea gives decisions quicker and clearer on any device. A practical release brings time back in your day all year round.

<div class="border rounded-4 p-2 p-md-4 bg-body-tertiary">
  <h3 class="h6 mb-2 mb-md-3">Inside the powerful story</h3>
  <p class="mb-0 small">A smart idea gives decisions quicker and clearer on any device. A practical release brings time back in your day all year round.</p>
</div>

18Underline that appears on hover

link-underline-opacity-0 hides the underline, the -hover variants bring it back with a little offset.

<nav class="d-flex flex-wrap gap-3" aria-label="Footer">
  <a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-0 link-underline-opacity-100-hover">About</a> <a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-0 link-underline-opacity-100-hover">Pricing</a> <a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-0 link-underline-opacity-100-hover">Support</a> <a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-0 link-underline-opacity-100-hover">Careers</a> 
</nav>

19Image with a text overlay

position-relative wrapper, an absolutely placed caption at bottom-0 and bg-dark with --ui-bg-opacity for the scrim.

Vancouver

Smarter payments for growing companies

<div class="position-relative rounded-4 overflow-hidden" style="max-width:26rem">
  <img src="../assets/img/photo-6.svg" alt="Banking built for the way you work" class="w-100 d-block"> 
  <div class="position-absolute bottom-0 start-0 end-0 bg-dark text-white p-3" style="--ui-bg-opacity:.6">
    <div class="small text-white-50">
      Vancouver
    </div>
    <div class="fw-semibold">
      Smarter payments for growing companies
    </div>
  </div>
</div>

20Empty state panel

A centred flex column with a large icon, muted text and one action, built from spacing and text utilities.

No files yet

A bright update turns you focused on what matters for teams of every size.

<div class="d-flex flex-column align-items-center text-center py-5 px-3 border rounded-4 bg-body-tertiary">
  <div class="fs-1 text-body-tertiary mb-2">
    <i class="bi bi-folder2-open" aria-hidden="true"></i>
  </div>
  <h3 class="h6 fw-semibold mb-1">No files yet</h3>
  <p class="small text-body-secondary mb-3">A bright update turns you focused on what matters for teams of every size.</p>
  <button type="button" class="btn btn-sm btn-primary"><i class="bi bi-cloud-arrow-up" aria-hidden="true"></i> Upload</button>
</div>