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-surface-3 rounded-lg p-4">
<div class="inline bg-primary-subtle rounded-sm px-2">
d-inline
</div>
<div class="inline bg-primary-subtle rounded-sm px-2">
d-inline
</div>
<span class="block bg-success-subtle rounded-sm px-2 mt-2">d-block</span> <span class="block bg-success-subtle rounded-sm 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-surface-3 rounded-lg p-4">
<span class="inline-block bg-info-subtle rounded-md p-4 me-1 mb-1">A</span> <span class="inline-block bg-info-subtle rounded-md p-4 me-1 mb-1" style="width:120px">width 120px</span> <span class="inline-block bg-info-subtle rounded-md p-4 mb-1">C</span>
</div>3Hide on small screens
d-none d-sm-block shows an element only from the sm breakpoint up.
Omar Rossi
Hidden below sm
<div class="flex gap-2 items-center border rounded-lg p-4">
<img src="../assets/img/avatar-11.svg" alt="Jonah Tanaka" width="40" height="40" class="rounded-full">
<div class="hidden sm:block">
<div class="font-semibold">
Omar Rossi
</div>
<div class="small text-muted">
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-lg p-4">
<div class="md:hidden text-bg-info rounded-md p-2 small">
<i class="bi bi-phone-fill" aria-hidden="true"></i> Swipe the table sideways to see more columns.
</div>
<div class="hidden md:block text-bg-success rounded-md 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="flex gap-2 flex-wrap">
<span class="inline-block sm:hidden badge text-bg-primary">xs</span> <span class="hidden sm:inline-block md:hidden badge text-bg-primary">sm</span> <span class="hidden md:inline-block lg:hidden badge text-bg-primary">md</span> <span class="hidden lg:inline-block xl:hidden badge text-bg-primary">lg</span> <span class="hidden xl:inline-block xxl:hidden badge text-bg-primary">xl</span> <span class="hidden xxl:inline-block badge text-bg-primary">xxl</span> <span class="small text-muted">current breakpoint</span>
</div>6d-flex container
d-flex turns children into flex items laid out in a row.
onetwothree<div class="flex gap-2 bg-surface-3 rounded-lg p-2">
<div class="bg-primary-subtle border border-primary/30 rounded-md p-2 text-center">
<code class="small">one</code>
</div>
<div class="bg-primary-subtle border border-primary/30 rounded-md p-2 text-center">
<code class="small">two</code>
</div>
<div class="bg-primary-subtle border border-primary/30 rounded-md 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="inline-flex items-center gap-1 border rounded-full px-2 small"><i class="bi bi-geo-alt-fill" 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="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="grid gap-2 md:flex md:justify-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
Starter
Renews
Dec 5, 2026
Amount
$78.90
<div class="table w-full border rounded-lg small">
<div class="table-row">
<div class="table-cell p-2 font-semibold border-b">
Plan
</div>
<div class="table-cell p-2 border-b">
Starter
</div>
</div>
<div class="table-row">
<div class="table-cell p-2 font-semibold border-b">
Renews
</div>
<div class="table-cell p-2 border-b">
Dec 5, 2026
</div>
</div>
<div class="table-row">
<div class="table-cell p-2 font-semibold">
Amount
</div>
<div class="table-cell p-2">
$78.90
</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-3666
Printed copy - Aeroora Flow
<div class="border rounded-lg p-4">
<div class="flex justify-between items-center">
<div class="font-semibold">
Invoice #ORD-3666
</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="hidden d-print-block small mb-0">Printed copy - Aeroora Flow</p>
</div>12Icon only on phones
The label hides below md with d-none d-md-inline while the icon stays.
<div class="flex gap-2">
<button type="button" class="btn btn-outline-primary"><i class="bi bi-download" aria-hidden="true"></i> <span class="hidden 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="hidden 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="hidden 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 listen first, then build a plan around what you actually need. Teams report saving around five hours a week after the first month.
<div class="row g-3">
<aside class="col-lg-4 hidden lg:block">
<div class="bg-surface-3 border rounded-lg p-4 h-full small">
<i class="bi bi-funnel-fill" aria-hidden="true"></i> Filters
</div>
</aside>
<div class="col-lg-8">
<div class="border rounded-lg p-4 small">
We listen first, then build a plan around what you actually need. Teams report saving around five hours a week after the first month.
</div>
</div>
</div>14Block links
d-block on links makes the full row clickable.
<div class="border rounded-lg overflow-hidden" style="max-width:18rem">
<a href="#" class="block px-4 py-2 border-b link-body-emphasis no-underline">Support</a> <a href="#" class="block px-4 py-2 border-b link-body-emphasis no-underline">Sales</a> <a href="#" class="block px-4 py-2 link-body-emphasis no-underline">Support</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="block sm:flex items-center gap-4" style="max-width:30rem">
<label class="form-label mb-1 sm:mb-0 whitespace-nowrap" for="ut-name-1249">Display name</label>
<input id="ut-name-1249" type="text" class="form-control" value="Ethan Hughes">
</div>16Inline-block badges in text
Small d-inline-block chips stay inside a sentence.
Aeroora Flow ships with Role-based access and Open API out of the box.
<p class="mb-0">Aeroora Flow ships with <span class="inline-block bg-success-subtle text-success-emphasis rounded-md px-2 small">Role-based access</span> and <span class="inline-block bg-info-subtle text-info-emphasis rounded-md px-2 small">Open API</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).
- Felix Mensah - Sales Executive
- Nadia Lindqvist - Art Director
| Name | Role |
|---|---|
| Felix Mensah | Sales Executive |
| Nadia Lindqvist | Art Director |
<div>
<ul class="list-unstyled md:hidden mb-0 border rounded-lg p-2 small">
<li class="border-b py-1"><strong>Felix Mensah</strong> - Sales Executive</li>
<li class="py-1"><strong>Nadia Lindqvist</strong> - Art Director</li>
</ul>
<div class="hidden 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>Felix Mensah</td>
<td>Sales Executive</td>
</tr>
<tr>
<td>Nadia Lindqvist</td>
<td>Art Director</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="flex items-center justify-center bg-surface-3 border rounded-xl" style="height:140px">
<span class="text-muted"><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.
AC (B has d-none)<div class="flex gap-2">
<div class="bg-primary-subtle border border-primary/30 rounded-md p-2 text-center">
<code class="small">A</code>
</div>
<div class="bg-primary-subtle border border-primary/30 rounded-md p-2 text-center hidden">
<code class="small">B</code>
</div>
<div class="bg-primary-subtle border border-primary/30 rounded-md 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="flex items-center gap-2 border rounded-lg 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="hidden 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 lg:hidden" aria-label="More"><i class="bi bi-three-dots" aria-hidden="true"></i></button>
</div>