Display
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.
Tariq Haddad
Hidden below sm
<div class="d-flex gap-2 align-items-center border rounded-3 p-3">
<img src="../assets/img/avatar-10.svg" alt="Mateo Okafor" width="40" height="40" class="rounded-circle">
<div class="d-none d-sm-block">
<div class="fw-semibold">
Tariq Haddad
</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 Prague 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> Prague</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
Jan 16, 2027
Amount
$48.15
<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">
Jan 16, 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">
$48.15
</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-2595
Printed copy - Solais Labs
<div class="border rounded-3 p-3">
<div class="d-flex justify-content-between align-items-center">
<div class="fw-semibold">
Invoice #ORD-2595
</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 - Solais Labs</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.
Three days of keynotes, hands-on workshops and evening meetups. Friendly people answer your questions quickly, by phone, chat or email.
<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">
Three days of keynotes, hands-on workshops and evening meetups. Friendly people answer your questions quickly, by phone, chat or email.
</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">Workshop</a> <a href="#" class="d-block px-3 py-2 border-bottom link-body-emphasis text-decoration-none">Meetup</a> <a href="#" class="d-block px-3 py-2 link-body-emphasis text-decoration-none">Meetup</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="Sofia Ortega">
</div>16Inline-block badges in text
Small d-inline-block chips stay inside a sentence.
Solais Labs ships with Hands-on workshops and Hands-on workshops out of the box.
<p class="mb-0">Solais Labs ships with <span class="d-inline-block bg-success-subtle text-success-emphasis rounded-2 px-2 small">Hands-on workshops</span> and <span class="d-inline-block bg-info-subtle text-info-emphasis rounded-2 px-2 small">Hands-on workshops</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).
- Kenji Mensah - Finance Lead
- Omar Quinn - Backend Engineer
| Name | Role |
|---|---|
| Kenji Mensah | Finance Lead |
| Omar Quinn | Backend Engineer |
<div>
<ul class="list-unstyled d-md-none mb-0 border rounded-3 p-2 small">
<li class="border-bottom py-1"><strong>Kenji Mensah</strong> - Finance Lead</li>
<li class="py-1"><strong>Omar Quinn</strong> - Backend 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>Kenji Mensah</td>
<td>Finance Lead</td>
</tr>
<tr>
<td>Omar Quinn</td>
<td>Backend 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" 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>