Display

Display

The utility d-* sets the display property.

<div className="d-none">This is none text.</div>
<div className="d-inline">This is inline text.</div>
<div className="d-inline">This is inline-block text.</div>
<div className="d-block">This is block text.</div>
<div className="d-inline-flex">This is inline-flex text.</div>
<div className="d-flex">This is flex text.</div>
<div className="d-grid">This is grid text.</div>
<div className="d-table">This is table text.</div>
<div className="d-table-row">This is table-row text.</div>
<div className="d-table-cell">This is table-cell text.</div>

Sm

The utility d-sm-* sets the display property for screen sizes 576px(sm) and up.

<div className="d-sm-none">This is none text.</div>
<div className="d-none d-sm-inline">This is inline text.</div>
<div className="d-none d-sm-inline">This is inline-block text.</div>
<div className="d-none d-sm-block">This is block text.</div>
<div className="d-none d-sm-inline-flex">This is inline-flex text.</div>
<div className="d-none d-sm-flex">This is flex text.</div>
<div className="d-none d-sm-grid">This is grid text.</div>
<div className="d-none d-sm-table">This is table text.</div>
<div className="d-none d-sm-table-row">This is table-row text.</div>
<div className="d-none d-sm-table-cell">This is table-cell text.</div>

Md

The utility d-md-* sets the display property for screen sizes 768px(md) and up.

<div className="d-md-none">This is should be hidden on min-width 768px.</div>
<div className="d-none d-md-inline">This is inline text.</div>
<div className="d-none d-md-inline">This is inline-block text.</div>
<div className="d-none d-md-block">This is block text.</div>
<div className="d-none d-md-inline-flex">This is inline-flex text.</div>
<div className="d-none d-md-flex">This is flex text.</div>
<div className="d-none d-md-grid">This is grid text.</div>
<div className="d-none d-md-table">This is table text.</div>
<div className="d-none d-md-table-row">This is table-row text.</div>
<div className="d-none d-md-table-cell">This is table-cell text.</div>

Lg

The utility d-lg-* sets the display property for screen sizes 992px(lg) and up.

<div className="d-lg-none">This is none text.</div>
<div className="d-none d-lg-inline">This is inline text.</div>
<div className="d-none d-lg-inline">This is inline-block text.</div>
<div className="d-none d-lg-block">This is block text.</div>
<div className="d-none d-lg-inline-flex">This is inline-flex text.</div>
<div className="d-none d-lg-flex">This is flex text.</div>
<div className="d-none d-lg-grid">This is grid text.</div>
<div className="d-none d-lg-table">This is table text.</div>
<div className="d-none d-lg-table-row">This is table-row text.</div>
<div className="d-none d-lg-table-cell">This is table-cell text.</div>

Xl

The utility d-xl-* sets the display property for screen sizes 1280px(xl) and up.

<div className="d-xl-none">This is none text.</div>
<div className="d-none d-xl-inline">This is inline text.</div>
<div className="d-none d-xl-inline">This is inline-block text.</div>
<div className="d-none d-xl-block">This is block text.</div>
<div className="d-none d-xl-inline-flex">This is inline-flex text.</div>
<div className="d-none d-xl-flex">This is flex text.</div>
<div className="d-none d-xl-grid">This is grid text.</div>
<div className="d-none d-xl-table">This is table text.</div>
<div className="d-none d-xl-table-row">This is table-row text.</div>
<div className="d-none d-xl-table-cell">This is table-cell text.</div>

Hiding Elements

Hide elements for specific screen size ranges by combining d-{breakpoint}-none with d-{breakpoint}-* utilities.