Bootstrap5 Display

Bootstrap 5 provides display utility classes to control the visibility and display behavior of elements. These classes help to show, hide, or change how an element is rendered without writing extra CSS.

1. Display Classes Overview

Bootstrap provides display classes that set the display property of an element. These classes use the d-* notation.

• d-none → Hides the element (display: none;)
• d-inline → Displays an element as an inline element (display: inline;)
• d-inline-block → Displays an element as an inline-block (display: inline-block;)
• d-block → Displays an element as a block (display: block;)
• d-grid → Displays an element as a grid container (display: grid;)
• d-inline-grid → Displays an element as an inline grid (display: inline-grid;)
• d-flex → Displays an element as a flex container (display: flex;)
• d-inline-flex → Displays an element as an inline flex container (display: inline-flex;)

Example:

<div class="box d-inline">d-inline</div>
<div class="box d-inline-block">d-inline-block</div>
<div class="box d-block">d-block</div>
<div class="box d-grid">d-grid</div>
<div class="box d-inline-grid">d-inline-grid</div>
<div class="box d-flex">d-flex</div>
<div class="box d-inline-flex">d-inline-flex</div>
<div class="box d-none">d-none (Hidden)</div>

2. Responsive Display Classes

Bootstrap allows you to change the display property based on screen size using responsive classes.

• d-sm-none, d-md-none, d-lg-none, d-xl-none → Hide elements on specific screen sizes.
• d-sm-block, d-md-block, d-lg-block, d-xl-block → Show elements as block at specific screen sizes.
• d-sm-inline, d-md-inline, d-lg-inline, d-xl-inline → Show elements as inline at specific screen sizes.
• d-sm-flex, d-md-flex, d-lg-flex, d-xl-flex → Show elements as flex containers at specific screen sizes.

Example:

<div class="box d-none d-md-block">Visible on Medium and Larger Screens</div>
<div class="box d-block d-md-none">Visible Only on Small Screens</div>

• The first box is hidden on small screens (d-none d-md-block).
• The second box is only visible on small screens (d-block d-md-none).