Display utilities switch the CSS display value: d-none, d-inline, d-inline-block, d-block, d-grid, d-flex, d-inline-flex and the table values. Add a breakpoint (d-md-flex, d-lg-none) to show, hide or re-flow an element from a screen size up, and d-print-* to control what appears on paper.
1Inline versus block
d-inline elements sit side by side and ignore width; d-block elements take a full row.
d-inline
d-inline
d-block
d-block
<div class="bg-body-tertiary rounded-3 p-3">
<div class="d-inline bg-primary-subtle rounded-1 px-2">
d-inline
</div>
<div class="d-inline bg-primary-subtle rounded-1 px-2">
d-inline
</div>
<span class="d-block bg-success-subtle rounded-1 px-2 mt-2">d-block</span> <span class="d-block bg-success-subtle rounded-1 px-2 mt-1">d-block</span>
</div>2Inline-block tiles
d-inline-block flows like text but accepts width, height and padding.
A
width 120px
C
<div class="bg-body-tertiary rounded-3 p-3">
<span class="d-inline-block bg-info-subtle rounded-2 p-3 me-1 mb-1">A</span> <span class="d-inline-block bg-info-subtle rounded-2 p-3 me-1 mb-1" style="width:120px">width 120px</span> <span class="d-inline-block bg-info-subtle rounded-2 p-3 mb-1">C</span>
</div>3Hide on small screens
d-none d-sm-block shows an element only from the sm breakpoint up.
Ethan Lindqvist
Hidden below sm
<div class="d-flex gap-2 align-items-center border rounded-3 p-3">
<img src="../assets/img/avatar-11.svg" alt="Finn Varga" width="40" height="40" class="rounded-circle">
<div class="d-none d-sm-block">
<div class="fw-semibold">
Ethan Lindqvist
</div>
<div class="small text-body-secondary">
Hidden below sm
</div>
</div>
</div>4Show only on phones
d-md-none shows a mobile-only element that disappears from md.
Swipe the table sideways to see more columns.
All columns fit on this screen.
<div class="border rounded-3 p-3">
<div class="d-md-none text-bg-info rounded-2 p-2 small">
<i class="bi bi-phone-fill" aria-hidden="true"></i> Swipe the table sideways to see more columns.
</div>
<div class="d-none d-md-block text-bg-success rounded-2 p-2 small">
<i class="bi bi-display-fill" aria-hidden="true"></i> All columns fit on this screen.
</div>
</div>5Visibility per breakpoint
Each label is visible on one breakpoint range only; resize to see which one shows.
xs
sm
md
lg
xl
xxl
current breakpoint
<div class="d-flex gap-2 flex-wrap">
<span class="d-inline-block d-sm-none badge text-bg-primary">xs</span> <span class="d-none d-sm-inline-block d-md-none badge text-bg-primary">sm</span> <span class="d-none d-md-inline-block d-lg-none badge text-bg-primary">md</span> <span class="d-none d-lg-inline-block d-xl-none badge text-bg-primary">lg</span> <span class="d-none d-xl-inline-block d-xxl-none badge text-bg-primary">xl</span> <span class="d-none d-xxl-inline-block badge text-bg-primary">xxl</span> <span class="small text-body-secondary">current breakpoint</span>
</div>6d-flex container
d-flex turns children into flex items laid out in a row.
onetwothree<div class="d-flex gap-2 bg-body-tertiary rounded-3 p-2">
<div class="bg-primary-subtle border border-primary-subtle rounded-2 p-2 text-center">
<code class="small">one</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-2 p-2 text-center">
<code class="small">two</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-2 p-2 text-center">
<code class="small">three</code>
</div>
</div>7d-inline-flex
d-inline-flex makes a flex container that only takes the width it needs.
Text before Seoul and text after.
<p class="mb-0">Text before <span class="d-inline-flex align-items-center gap-1 border rounded-pill px-2 small"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Seoul</span> and text after.</p>8d-grid
d-grid with gap stacks children in a single column grid, great for full width buttons.
<div class="d-grid gap-2" style="max-width:20rem">
<button type="button" class="btn btn-primary">Continue</button>
<button type="button" class="btn btn-outline-secondary">Back</button>
</div>9Responsive grid buttons
d-grid on phones, d-md-flex from md: buttons go full width on small screens and inline later.
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button type="button" class="btn btn-light border">Save draft</button>
<button type="button" class="btn btn-primary">Publish</button>
</div>10Table display
d-table, d-table-row and d-table-cell lay out divs like a table.
Plan
Pro
Renews
Oct 25, 2026
Amount
$48.68
<div class="d-table w-100 border rounded-3 small">
<div class="d-table-row">
<div class="d-table-cell p-2 fw-semibold border-bottom">
Plan
</div>
<div class="d-table-cell p-2 border-bottom">
Pro
</div>
</div>
<div class="d-table-row">
<div class="d-table-cell p-2 fw-semibold border-bottom">
Renews
</div>
<div class="d-table-cell p-2 border-bottom">
Oct 25, 2026
</div>
</div>
<div class="d-table-row">
<div class="d-table-cell p-2 fw-semibold">
Amount
</div>
<div class="d-table-cell p-2">
$48.68
</div>
</div>
</div>11Hide when printing
d-print-none hides buttons and navigation on paper; d-none d-print-block shows print-only text.
Invoice #INV-1360
Printed copy - Irisan
<div class="border rounded-3 p-3">
<div class="d-flex justify-content-between align-items-center">
<div class="fw-semibold">
Invoice #INV-1360
</div>
<button type="button" class="btn btn-sm btn-outline-secondary d-print-none"><i class="bi bi-printer-fill" aria-hidden="true"></i> Print</button>
</div>
<p class="d-none d-print-block small mb-0">Printed copy - Irisan</p>
</div>12Icon only on phones
The label hides below md with d-none d-md-inline while the icon stays.
<div class="d-flex gap-2">
<button type="button" class="btn btn-outline-primary"><i class="bi bi-download" aria-hidden="true"></i> <span class="d-none d-md-inline">Download</span></button>
<button type="button" class="btn btn-outline-primary"><i class="bi bi-share-fill" aria-hidden="true"></i> <span class="d-none d-md-inline">Share</span></button>
<button type="button" class="btn btn-outline-danger"><i class="bi bi-trash3-fill" aria-hidden="true"></i> <span class="d-none d-md-inline">Remove</span></button>
</div>13Sidebar only on large screens
The aside uses d-none d-lg-block, so the main column takes the full width on smaller screens.
We measure success by how many buyers come back and tell their friends. Thousands of buyers already trust us, and we work hard to keep it that way.
<div class="row g-3">
<aside class="col-lg-4 d-none d-lg-block">
<div class="bg-body-tertiary border rounded-3 p-3 h-100 small">
<i class="bi bi-funnel-fill" aria-hidden="true"></i> Filters
</div>
</aside>
<div class="col-lg-8">
<div class="border rounded-3 p-3 small">
We measure success by how many buyers come back and tell their friends. Thousands of buyers already trust us, and we work hard to keep it that way.
</div>
</div>
</div>14Block links
d-block on links makes the full row clickable.
<div class="border rounded-3 overflow-hidden" style="max-width:18rem">
<a href="#" class="d-block px-3 py-2 border-bottom link-body-emphasis text-decoration-none">Apartments</a> <a href="#" class="d-block px-3 py-2 border-bottom link-body-emphasis text-decoration-none">Apartments</a> <a href="#" class="d-block px-3 py-2 link-body-emphasis text-decoration-none">Commercial</a>
</div>15Responsive two column form
d-block on phones, d-sm-flex from sm, keeps label and input stacked until there is room.
<div class="d-block d-sm-flex align-items-center gap-3" style="max-width:30rem">
<label class="form-label mb-1 mb-sm-0 text-nowrap" for="ut-name-1249">Display name</label>
<input id="ut-name-1249" type="text" class="form-control" value="Liam Okafor">
</div>16Inline-block badges in text
Small d-inline-block chips stay inside a sentence.
Irisan ships with 3D tours and Price alerts out of the box.
<p class="mb-0">Irisan ships with <span class="d-inline-block bg-success-subtle text-success-emphasis rounded-2 px-2 small">3D tours</span> and <span class="d-inline-block bg-info-subtle text-info-emphasis rounded-2 px-2 small">Price alerts</span> out of the box.</p>17Swap layout at a breakpoint
A compact list on phones (d-md-none) and a table from md (d-none d-md-block).
- Arjun Delgado - Art Director
- Ravi Fischer - Frontend Engineer
| Name | Role |
|---|---|
| Arjun Delgado | Art Director |
| Ravi Fischer | Frontend Engineer |
<div>
<ul class="list-unstyled d-md-none mb-0 border rounded-3 p-2 small">
<li class="border-bottom py-1"><strong>Arjun Delgado</strong> - Art Director</li>
<li class="py-1"><strong>Ravi Fischer</strong> - Frontend Engineer</li>
</ul>
<div class="d-none d-md-block">
<table class="table table-sm mb-0">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arjun Delgado</td>
<td>Art Director</td>
</tr>
<tr>
<td>Ravi Fischer</td>
<td>Frontend Engineer</td>
</tr>
</tbody>
</table>
</div>
</div>18Centre with d-flex
d-flex, align-items-center and justify-content-center centre content in both directions.
Centred
<div class="d-flex align-items-center justify-content-center bg-body-tertiary border rounded-4" style="height:140px">
<span class="text-body-secondary"><i class="bi bi-bullseye" aria-hidden="true"></i> Centred</span>
</div>19Hide an empty slot
d-none removes an element completely; it takes no space, unlike invisible.
ABC (B has d-none)<div class="d-flex gap-2">
<div class="bg-primary-subtle border border-primary-subtle rounded-2 p-2 text-center">
<code class="small">A</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-2 p-2 text-center d-none">
<code class="small">B</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-2 p-2 text-center">
<code class="small">C (B has d-none)</code>
</div>
</div>20Toolbar that collapses
Secondary tools use d-none d-lg-flex and a single More button shows on smaller screens.
<div class="d-flex align-items-center gap-2 border rounded-3 p-2">
<button type="button" class="btn btn-sm btn-light" aria-label="Bold"><i class="bi bi-type-bold" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-light" aria-label="Italic"><i class="bi bi-type-italic" aria-hidden="true"></i></button>
<div class="d-none d-lg-flex gap-2">
<button type="button" class="btn btn-sm btn-light" aria-label="List"><i class="bi bi-list-ul" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-light" aria-label="Link"><i class="bi bi-link-45deg" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-light" aria-label="Image"><i class="bi bi-image-fill" aria-hidden="true"></i></button>
</div>
<button type="button" class="btn btn-sm btn-light d-lg-none" aria-label="More"><i class="bi bi-three-dots" aria-hidden="true"></i></button>
</div>