Bootstrap 5 Display property

To show and hide element on different resolution or devices we use display property

Notation

.d-{value} for xs
.d-{breakpoint}-{value} for sm, md, lg, xl, and xxl are breakpoint

{value} can be

none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex

Examples

<div class="d-inline">d-inline</div>
<div class="d-inline">d-inline</div>

<span class="d-block">d-block</span>
<span class="d-block">d-block</span>

Hiding elements

<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Display in print
.d-print-{value}

{value} are

.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>

Getting Started

Layout

Customize

Content

Forms

Components

Utlities

Bootstrap 5 Display property