Bootstrap 5 Tutorial

v5.3.0

Bootstrap 5 Tutorial

Display Utilities in Bootstrap 5

Display Utilities: Control the display property of elements with responsive variations.

What are Display Utilities?

Display utilities allow you to quickly change the CSS display property of elements. They're especially useful for responsive design where you need to show/hide elements at different breakpoints.

Basic Display Classes

Display Property Values

`.d-none`

Visible element

`.d-block`

Inline → BlockAnother block

`.d-inline`

Block → Inline

Next to it

`.d-inline-block`

Width works

Next inline

`.d-flex`

Flex container

`.d-inline-flex`

Inline flex

Text next to it

`.d-grid`

Grid container

<!-- Display None -->
<div class="d-none">Hidden element</div>

<!-- Display Block -->
<span class="d-block">Inline element made block</div>
<div class="d-block">Already block element</div>

<!-- Display Inline -->
<div class="d-inline">Block element made inline</div>

<!-- Display Inline Block -->
<div class="d-inline-block">Inline-block element</div>

<!-- Display Flex -->
<div class="d-flex">Flex container</div>

<!-- Display Inline Flex -->
<div class="d-inline-flex">Inline flex container</div>

<!-- Display Grid -->
<div class="d-grid">Grid container</div>

<!-- Display Table -->
<div class="d-table">Table display</div>
<div class="d-table-cell">Table cell display</div>

Table Display Utilities

CSS Table Display Properties

Header 1

Header 2

Header 3

Row 1, Cell 1

Row 1, Cell 2

Row 1, Cell 3

Row 2, Cell 1

Row 2, Cell 2

Row 2, Cell 3

Product

Price

Stock

Laptop

$999

In Stock

Phone

$699

Low Stock

<!-- Table Display -->
<div class="d-table">
  <div class="d-table-row">
    <div class="d-table-cell">Header 1</div>
    <div class="d-table-cell">Header 2</div>
  </div>
  <div class="d-table-row">
    <div class="d-table-cell">Row 1, Cell 1</div>
    <div class="d-table-cell">Row 1, Cell 2</div>
  </div>
</div>

<!-- Complete Table Example -->
<div class="d-table w-100 border">
  <div class="d-table-row">
    <div class="d-table-cell border p-2 fw-bold">Product</div>
    <div class="d-table-cell border p-2 fw-bold">Price</div>
    <div class="d-table-cell border p-2 fw-bold">Status</div>
  </div>
  <div class="d-table-row">
    <div class="d-table-cell border p-2">Item 1</div>
    <div class="d-table-cell border p-2">$99</div>
    <div class="d-table-cell border p-2">
      <span class="badge bg-success">Available</span>
    </div>
  </div>
</div>

Print Display Utilities

Print Media Display Control

Hide when printing

This won't appear in print

(Visible on screen only)

Print-only content

Only appears when printed

(Hidden on screen)

Print Display Classes

.d-print-none - Hide when printing
.d-print-inline - Display as inline when printing
.d-print-inline-block - Display as inline-block when printing
.d-print-block - Display as block when printing
.d-print-flex - Display as flex when printing
.d-print-table - Display as table when printing
.d-print-grid - Display as grid when printing

Use print utilities for creating printer-friendly versions of your content, hiding navigation, ads, and other non-essential elements.

<!-- Hide elements when printing -->
<nav class="d-print-none">
  <!-- Navigation won't print -->
</nav>

<aside class="d-print-none">
  <!-- Sidebar won't print -->
</aside>

<!-- Show elements only when printing -->
<div class="d-none d-print-block">
  <!-- Print header/footer -->
  <div class="text-center">
    <h1>Document Title</h1>
    <p>Printed on: <span id="print-date"></span></p>
  </div>
</div>

<!-- Regular content -->
<article class="content">
  <p>This content appears both on screen and in print.</p>
  
  <!-- Screen-only note -->
  <div class="d-print-none alert alert-info">
    Note: This alert won't appear in the printed version.
  </div>
  
  <!-- Print-only continuation -->
  <div class="d-none d-print-block">
    <p>Continued on next page...</p>
  </div>
</article>

Hiding Elements

Visibility Control with .d-none

Conditional Visibility

Always visible

Show/Hide based on state

Error! Something went wrong.

Comparison with .invisible

Visible

Invisible

Next to it

.invisible hides element but keeps its space
.d-none completely removes element from flow

<!-- Basic hiding -->
<div class="d-none">Completely hidden</div>

<!-- Toggle visibility with JavaScript -->
<div class="alert alert-success d-none" id="message">
  Message content
</div>

<script>
  // Show the message
  document.getElementById('message').classList.remove('d-none');
  
  // Hide the message
  document.getElementById('message').classList.add('d-none');
</script>

<!-- Invisible vs Hidden -->
<div class="invisible">
  Hidden but occupies space (visibility: hidden)
</div>

<div class="d-none">
  Completely removed (display: none)
</div>

<!-- Conditional display -->
<div class="alert" id="status-alert">
  Status message
</div>

<script>
  function showSuccess() {
    const alert = document.getElementById('status-alert');
    alert.classList.remove('d-none', 'alert-danger');
    alert.classList.add('alert-success');
    alert.textContent = 'Success!';
  }
  
  function hideAlert() {
    document.getElementById('status-alert').classList.add('d-none');
  }
</script>

Responsive Display

Hidden on mobile only

.d-none .d-sm-block

Hidden on xs, visible on sm+

Visible on mobile only

.d-block .d-sm-none

Visible on xs, hidden on sm+

Tablet and up

.d-none .d-md-block

Hidden on xs/sm, visible on md+

Desktop only

.d-none .d-lg-block

Hidden on xs/sm/md, visible on lg+

Responsive table

Screen Size	Class	Behavior
Mobile (<576px)	`.d-block .d-sm-none`	Show only on mobile
Tablet (≥768px)	`.d-none .d-md-block`	Show from tablet up
Desktop (≥992px)	`.d-none .d-lg-block`	Show from desktop up
Large Desktop (≥1200px)	`.d-none .d-xl-block`	Show from large desktop up

<!-- Responsive Display Patterns -->

<!-- Hidden on mobile, visible on tablet+ -->
<div class="d-none d-md-block">
  Content for tablet and desktop
</div>

<!-- Visible only on mobile -->
<div class="d-block d-md-none">
  Mobile-only content
</div>

<!-- Different display at each breakpoint -->
<div class="d-block d-md-none d-lg-flex d-xl-grid">
  Block on mobile, none on tablet, flex on desktop, grid on xl
</div>

<!-- Responsive navigation -->
<nav class="navbar">
  <!-- Logo always visible -->
  <a class="navbar-brand d-inline-block" href="#">Logo</a>
  
  <!-- Desktop navigation -->
  <div class="d-none d-md-block">
    <ul class="navbar-nav">
      <li class="nav-item">Home</li>
      <li class="nav-item">About</li>
    </ul>
  </div>
  
  <!-- Mobile menu button -->
  <button class="navbar-toggler d-md-none" type="button">
    Menu
  </button>
</nav>

<!-- Responsive table display -->
<div class="d-none d-md-table">
  <!-- Full table on desktop -->
  <table>...</table>
</div>

<div class="d-table d-md-none">
  <!-- Simplified table on mobile -->
  <div class="d-table-row">
    <div class="d-table-cell">Mobile view</div>
  </div>
</div>

Display with Flex and Grid

Combining Display with Layout Utilities

Responsive Flex Container

Item 1

Item 2

Item 3

.d-flex .flex-column .flex-md-row

Inline Flex for Buttons

Inline text next to buttons

Grid Display

Grid Item 1

Grid Item 2

Grid Item 3

<!-- Flex display with responsive direction -->
<div class="d-flex flex-column flex-md-row">
  <div class="flex-fill">Item 1</div>
  <div class="flex-fill">Item 2</div>
  <div class="flex-fill">Item 3</div>
</div>

<!-- Inline flex for button groups -->
<div class="d-inline-flex gap-2">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-secondary">Button 2</button>
</div>

<!-- Grid display -->
<div class="d-grid gap-3">
  <div class="p-3">Grid Item 1</div>
  <div class="p-3">Grid Item 2</div>
  <div class="p-3">Grid Item 3</div>
</div>

<!-- Responsive grid -->
<div class="d-grid gap-2 gap-md-4">
  <div>Item with responsive gap</div>
  <div>Another item</div>
</div>

<!-- Complex responsive layout -->
<div class="d-flex flex-column flex-lg-row gap-3">
  <div class="d-flex flex-column flex-md-row gap-2 flex-lg-column">
    <!-- Nested flex with responsive behavior -->
  </div>
  <div class="flex-grow-1">
    <!-- Main content area -->
  </div>
</div>

Practical Examples

Responsive Navigation

On mobile: Only brand and menu button visible

<nav class="navbar">
  <!-- Always visible -->
  <a class="navbar-brand d-inline-block">Brand</a>
  
  <!-- Desktop navigation (hidden on mobile) -->
  <div class="d-none d-lg-block">
    <ul class="navbar-nav">
      <li class="nav-item">Home</li>
      <li class="nav-item">About</li>
    </ul>
  </div>
  
  <!-- Desktop buttons (hidden on mobile) -->
  <div class="d-none d-md-flex ms-auto">
    <button class="btn btn-outline-primary">Login</button>
    <button class="btn btn-primary">Sign Up</button>
  </div>
  
  <!-- Mobile menu button (hidden on desktop) -->
  <button class="navbar-toggler d-lg-none">
    Menu
  </button>
</nav>

Responsive Content Layout

Article Title

Full description visible on tablet and desktop only.

Short description for mobile.

Jan 15, 2024

<!-- Responsive image + text layout -->
<div class="d-flex flex-column flex-md-row gap-3">
  <!-- Image (fixed width) -->
  <div class="flex-shrink-0">
    <img src="image.jpg" class="rounded" alt="">
  </div>
  
  <!-- Content (flexible) -->
  <div class="flex-grow-1">
    <h5>Title</h5>
    
    <!-- Different text for mobile vs desktop -->
    <p class="text-muted d-none d-md-block">
      Full description for desktop
    </p>
    <p class="text-muted d-block d-md-none">
      Short description for mobile
    </p>
    
    <div class="d-flex justify-content-between">
      <span class="text-muted">Date</span>
      
      <!-- Button only on desktop -->
      <button class="btn btn-sm btn-success d-none d-md-inline-block">
        Desktop Button
      </button>
    </div>
  </div>
</div>

<!-- Responsive button group -->
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary">Always visible</button>
  <button class="btn btn-outline-secondary d-none d-md-inline-block">
    Desktop only
  </button>
</div>

Best Practices

Display Utility Guidelines

✅ Use responsive display classes for mobile-first design
✅ Combine with other utilities for complex layouts
✅ Use .d-none for conditional visibility (not for SEO content)
✅ Prefer .invisible when you need to maintain layout space
✅ Use print utilities for printer-friendly pages
✅ Test display changes at all breakpoints
✅ Document responsive behavior for complex layouts

Common Patterns

Pattern	Classes	Behavior	Use Case
Mobile-only	`.d-block .d-sm-none`	Visible only on mobile	Mobile-specific content
Desktop-only	`.d-none .d-md-block`	Visible on tablet and up	Complex desktop features
Hide on print	`.d-print-none`	Hidden when printing	Navigation, ads
Responsive flex	`.d-flex .flex-column .flex-md-row`	Stacked on mobile, row on desktop	Card layouts
Inline buttons	`.d-inline-flex .gap-2`	Inline button group	Action buttons
Toggle visibility	`.d-none` + JS	Show/hide dynamically	Alerts, modals

NextIntroduction

→

Bootstrap 5 Tutorial

Bootstrap Basics

Layout System

Typography

Colors & Backgrounds

Images & Media

Tables

Forms

Buttons

Components

Utilities

Advanced Topics

Real-World Projects

Bootstrap 5 Tutorial