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-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.

Mia Fischer

Hidden below sm

<div class="flex gap-2 items-center border rounded-lg p-4">
  <img src="../assets/img/avatar-2.svg" alt="Tariq Morgan" width="40" height="40" class="rounded-full"> 
  <div class="hidden sm:block">
    <div class="font-semibold">
      Mia Fischer
    </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" 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" 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 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.

one

two

three

<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 Porto 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" aria-hidden="true"></i> Porto</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 6, 2026

Amount

$61.23

<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 6, 2026
    </div>
  </div>
  <div class="table-row">
    <div class="table-cell p-2 font-semibold">
      Amount
    </div>
    <div class="table-cell p-2">
      $61.23
    </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-1970

Printed copy - Glowia

<div class="border rounded-lg p-4">
  <div class="flex justify-between items-center">
    <div class="font-semibold">
      Invoice #ORD-1970
    </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="hidden d-print-block small mb-0">Printed copy - Glowia</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" 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" 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.

Every donation is tax-deductible, and receipts arrive by email instantly. Companies can match employee donations and double their impact.

<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" aria-hidden="true"></i> Filters
    </div>
  </aside>
  <div class="col-lg-8">
    <div class="border rounded-lg p-4 small">
      Every donation is tax-deductible, and receipts arrive by email instantly. Companies can match employee donations and double their impact.
    </div>
  </div>
</div>

14Block links

d-block on links makes the full row clickable.

Health Education Animals

<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">Health</a> <a href="#" class="block px-4 py-2 border-b link-body-emphasis no-underline">Education</a> <a href="#" class="block px-4 py-2 link-body-emphasis no-underline">Animals</a> 
</div>

15Responsive two column form

d-block on phones, d-sm-flex from sm, keeps label and input stacked until there is room.

Display name

<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="Lucas Brennan"> 
</div>

16Inline-block badges in text

Small d-inline-block chips stay inside a sentence.

Glowia ships with Local partners and Volunteer network out of the box.

<p class="mb-0">Glowia ships with <span class="inline-block bg-success-subtle text-success-emphasis rounded-md px-2 small">Local partners</span> and <span class="inline-block bg-info-subtle text-info-emphasis rounded-md px-2 small">Volunteer network</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).

Owen Silva - Art Director
Felix Duarte - Content Writer

Name	Role
Owen Silva	Art Director
Felix Duarte	Content Writer

<div>
  <ul class="list-unstyled md:hidden mb-0 border rounded-lg p-2 small">
    <li class="border-b py-1"><strong>Owen Silva</strong> - Art Director</li>
    <li class="py-1"><strong>Felix Duarte</strong> - Content Writer</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>Owen Silva</td>
          <td>Art Director</td>
        </tr>
        <tr>
          <td>Felix Duarte</td>
          <td>Content Writer</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.

A

B

C (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" 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>