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.
Ivy Carter
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="Owen Nguyen" width="40" height="40" class="rounded-circle">
<div class="d-none d-sm-block">
<div class="fw-semibold">
Ivy Carter
</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 Melbourne 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> Melbourne</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 29, 2027
Amount
$25.71
<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 29, 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">
$25.71
</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 #TX-5025
Printed copy - Iris Hub
<div class="border rounded-3 p-3">
<div class="d-flex justify-content-between align-items-center">
<div class="fw-semibold">
Invoice #TX-5025
</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 - Iris Hub</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.
Our menu changes with the seasons and the best produce from nearby farms. Order for pickup or delivery and enjoy the same dishes at home.
<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">
Our menu changes with the seasons and the best produce from nearby farms. Order for pickup or delivery and enjoy the same dishes at home.
</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">Drinks</a> <a href="#" class="d-block px-3 py-2 border-bottom link-body-emphasis text-decoration-none">Mains</a> <a href="#" class="d-block px-3 py-2 link-body-emphasis text-decoration-none">Specials</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="Kenji Duarte">
</div>16Inline-block badges in text
Small d-inline-block chips stay inside a sentence.
Iris Hub ships with Online reservations and Vegan options out of the box.
<p class="mb-0">Iris Hub ships with <span class="d-inline-block bg-success-subtle text-success-emphasis rounded-2 px-2 small">Online reservations</span> and <span class="d-inline-block bg-info-subtle text-info-emphasis rounded-2 px-2 small">Vegan options</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).
- Diego Delgado - QA Engineer
- Theo Tanaka - Support Specialist
| Name | Role |
|---|---|
| Diego Delgado | QA Engineer |
| Theo Tanaka | Support Specialist |
<div>
<ul class="list-unstyled d-md-none mb-0 border rounded-3 p-2 small">
<li class="border-bottom py-1"><strong>Diego Delgado</strong> - QA Engineer</li>
<li class="py-1"><strong>Theo Tanaka</strong> - Support Specialist</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>Diego Delgado</td>
<td>QA Engineer</td>
</tr>
<tr>
<td>Theo Tanaka</td>
<td>Support Specialist</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>