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.
Kai Delgado
Hidden below sm
<div class="d-flex gap-2 align-items-center border rounded-3 p-3">
<img src="../assets/img/avatar-8.svg" alt="Luna Kowalski" width="40" height="40" class="rounded-circle">
<div class="d-none d-sm-block">
<div class="fw-semibold">
Kai Delgado
</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" 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" 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 Copenhagen 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" aria-hidden="true"></i> Copenhagen</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
Team
Renews
Jan 25, 2027
Amount
$38.57
<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">
Team
</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">
Jan 25, 2027
</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">
$38.57
</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 #ORD-6369
Printed copy - Sageo Studio
<div class="border rounded-3 p-3">
<div class="d-flex justify-content-between align-items-center">
<div class="fw-semibold">
Invoice #ORD-6369
</div>
<button type="button" class="btn btn-sm btn-outline-secondary d-print-none"><i class="bi bi-printer" aria-hidden="true"></i> Print</button>
</div>
<p class="d-none d-print-block small mb-0">Printed copy - Sageo Studio</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" 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" 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.
Nutrition plans fit your routine and the food you actually enjoy. Small group classes mean your coach knows your name and your form.
<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" aria-hidden="true"></i> Filters
</div>
</aside>
<div class="col-lg-8">
<div class="border rounded-3 p-3 small">
Nutrition plans fit your routine and the food you actually enjoy. Small group classes mean your coach knows your name and your form.
</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">Cardio</a> <a href="#" class="d-block px-3 py-2 border-bottom link-body-emphasis text-decoration-none">Cardio</a> <a href="#" class="d-block px-3 py-2 link-body-emphasis text-decoration-none">HIIT</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="Mia Silva">
</div>16Inline-block badges in text
Small d-inline-block chips stay inside a sentence.
Sageo Studio ships with Certified coaches and Community events out of the box.
<p class="mb-0">Sageo Studio ships with <span class="d-inline-block bg-success-subtle text-success-emphasis rounded-2 px-2 small">Certified coaches</span> and <span class="d-inline-block bg-info-subtle text-info-emphasis rounded-2 px-2 small">Community events</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).
- Chloe Larsen - Backend Engineer
- Mateo Carter - Project Manager
| Name | Role |
|---|---|
| Chloe Larsen | Backend Engineer |
| Mateo Carter | Project Manager |
<div>
<ul class="list-unstyled d-md-none mb-0 border rounded-3 p-2 small">
<li class="border-bottom py-1"><strong>Chloe Larsen</strong> - Backend Engineer</li>
<li class="py-1"><strong>Mateo Carter</strong> - Project Manager</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>Chloe Larsen</td>
<td>Backend Engineer</td>
</tr>
<tr>
<td>Mateo Carter</td>
<td>Project Manager</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" 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>