Display
Display
The utility d-* sets the display property.
| Utility | Description | Example |
|---|---|---|
| d-none | none | This is none text. |
| d-inline | inline | This is inline text. |
| d-inline-block | inline-block | This is inline-block text. |
| d-block | block | This is block text. |
| d-inline-flex | inline-flex | This is inline-flex text. |
| d-flex | flex | This is flex text. |
| d-grid | grid | This is grid text. |
| d-table | table | This is table text. |
| d-table-row | table-row | This is table-row text. |
| d-table-cell | table-cell | This is table-cell text. |
Copied!
<div class="d-none">This is none text.</div>
<div class="d-inline">This is inline text.</div>
<div class="d-inline">This is inline-block text.</div>
<div class="d-block">This is block text.</div>
<div class="d-inline-flex">This is inline-flex text.</div>
<div class="d-flex">This is flex text.</div>
<div class="d-grid">This is grid text.</div>
<div class="d-table">This is table text.</div>
<div class="d-table-row">This is table-row text.</div>
<div class="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.
| Utility | Description | Example |
|---|---|---|
| d-sm-none | Hidden on min-width: 576px (sm) | This is visible between 0 and 576px. |
| d-none d-sm-inline | Hidden between 0 and 575px and `inline` on min-width: 576px (sm) | This is inline text. |
| d-none d-sm-inline-block | Hidden between 0 and 575px and `inline-block` on min-width: 576px (sm) | This is inline-block text. |
| d-none d-sm-block | Hidden between 0 and 575px and `block` on min-width: 576px (sm) | This is block text. |
| d-none d-sm-inline-flex | Hidden between 0 and 575px and `inline-flex` on min-width: 576px (sm) | This is inline-flex text. |
| d-none d-sm-flex | Hidden between 0 and 575px and `flex` on min-width: 576px (sm) | This is flex text. |
| d-none d-sm-grid | Hidden between 0 and 575px and `grid` on min-width: 576px (sm) | This is grid text. |
| d-none d-sm-table | Hidden between 0 and 575px and `table` on min-width: 576px (sm) | This is table text. |
| d-none d-sm-table-row | Hidden between 0 and 575px and `table-row` on min-width: 576px (sm) | This is table-row text. |
| d-none d-sm-table-cell | Hidden between 0 and 575px and `table-cell` on min-width: 576px (sm) | This is table-cell text. |
Copied!
<div class="d-sm-none">This is none text.</div>
<div class="d-none d-sm-inline">This is inline text.</div>
<div class="d-none d-sm-inline">This is inline-block text.</div>
<div class="d-none d-sm-block">This is block text.</div>
<div class="d-none d-sm-inline-flex">This is inline-flex text.</div>
<div class="d-none d-sm-flex">This is flex text.</div>
<div class="d-none d-sm-grid">This is grid text.</div>
<div class="d-none d-sm-table">This is table text.</div>
<div class="d-none d-sm-table-row">This is table-row text.</div>
<div class="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.
| Utility | Description | Example |
|---|---|---|
| d-md-none | Hidden on min-width 768px (md) | This is should be hidden on min-width 768px. |
| d-none d-md-inline | Hidden between 0 and 767px and `inline` on min-width: 768px (md) | This is inline text. |
| d-none d-md-inline-block | Hidden between 0 and 767px and `inline-block` on min-width: 768px (md) | This is inline-block text. |
| d-none d-md-block | Hidden between 0 and 767px and `block` on min-width: 768px (md) | This is block text. |
| d-none d-md-inline-flex | Hidden between 0 and 767px and `inline-flex` on min-width: 768px (md) | This is inline-flex text. |
| d-none d-md-flex | Hidden between 0 and 767px and `flex` on min-width: 768px (md) | This is flex text. |
| d-none d-md-grid | Hidden between 0 and 767px and `grid` on min-width: 768px (md) | This is grid text. |
| d-none d-md-table | Hidden between 0 and 767px and `table` on min-width: 768px (md) | This is table text. |
| d-none d-md-table-row | Hidden between 0 and 767px and `table-row` on min-width: 768px (md) | This is table-row text. |
| d-none d-md-table-cell | Hidden between 0 and 767px and `table-cell` on min-width: 768px (md) | This is table-cell text. |
Copied!
<div class="d-md-none">This is should be hidden on min-width 768px.</div>
<div class="d-none d-md-inline">This is inline text.</div>
<div class="d-none d-md-inline">This is inline-block text.</div>
<div class="d-none d-md-block">This is block text.</div>
<div class="d-none d-md-inline-flex">This is inline-flex text.</div>
<div class="d-none d-md-flex">This is flex text.</div>
<div class="d-none d-md-grid">This is grid text.</div>
<div class="d-none d-md-table">This is table text.</div>
<div class="d-none d-md-table-row">This is table-row text.</div>
<div class="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.
| Utility | Description | Example |
|---|---|---|
| d-lg-none | Hidden on min-width: 992px (lg) | This is none text. |
| d-none d-lg-inline | Hidden between 0 and 991px and `inline` on min-width: 992px (lg) | This is inline text. |
| d-none d-lg-inline-block | Hidden between 0 and 991px and `inline-block` on min-width: 992px (lg) | This is inline-block text. |
| d-none d-lg-block | Hidden between 0 and 991px and `block` on min-width: 992px (lg) | This is block text. |
| d-none d-lg-inline-flex | Hidden between 0 and 991px and `inline-flex` on min-width: 992px (lg) | This is inline-flex text. |
| d-none d-lg-flex | Hidden between 0 and 991px and `flex` on min-width: 992px (lg) | This is flex text. |
| d-none d-lg-grid | Hidden between 0 and 991px and `grid` on min-width: 992px (lg) | This is grid text. |
| d-none d-lg-table | Hidden between 0 and 991px and `table` on min-width: 992px (lg) | This is table text. |
| d-none d-lg-table-row | Hidden between 0 and 991px and `table-row` on min-width: 992px (lg) | This is table-row text. |
| d-none d-lg-table-cell | Hidden between 0 and 991px and `table-cell` on min-width: 992px (lg) | This is table-cell text. |
Copied!
<div class="d-lg-none">This is none text.</div>
<div class="d-none d-lg-inline">This is inline text.</div>
<div class="d-none d-lg-inline">This is inline-block text.</div>
<div class="d-none d-lg-block">This is block text.</div>
<div class="d-none d-lg-inline-flex">This is inline-flex text.</div>
<div class="d-none d-lg-flex">This is flex text.</div>
<div class="d-none d-lg-grid">This is grid text.</div>
<div class="d-none d-lg-table">This is table text.</div>
<div class="d-none d-lg-table-row">This is table-row text.</div>
<div class="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.
| Utility | Description | Example |
|---|---|---|
| d-xl-none | Hidden on min-width: 1280px (xl) | This is none text. |
| d-none d-xl-inline | Hidden between 0 and 1279px and `inline` on min-width: 1280px (xl) | This is inline text. |
| d-none d-xl-inline-block | Hidden between 0 and 1279px and `inline-block` on min-width: 1280px (xl) | This is inline-block text. |
| d-none d-xl-block | Hidden between 0 and 1279px and `block` on min-width: 1280px (xl) | This is block text. |
| d-none d-xl-inline-flex | Hidden between 0 and 1279px and `inline-flex` on min-width: 1280px (xl) | This is inline-flex text. |
| d-none d-xl-flex | Hidden between 0 and 1279px and `flex` on min-width: 1280px (xl) | This is flex text. |
| d-none d-xl-grid | Hidden between 0 and 1279px and `grid` on min-width: 1280px (xl) | This is grid text. |
| d-none d-xl-table | Hidden between 0 and 1279px and `table` on min-width: 1280px (xl) | This is table text. |
| d-none d-xl-table-row | Hidden between 0 and 1279px and `table-row` on min-width: 1280px (xl) | This is table-row text. |
| d-none d-xl-table-cell | Hidden between 0 and 1279px and `table-cell` on min-width: 1280px (xl) | This is table-cell text. |
Copied!
<div class="d-xl-none">This is none text.</div>
<div class="d-none d-xl-inline">This is inline text.</div>
<div class="d-none d-xl-inline">This is inline-block text.</div>
<div class="d-none d-xl-block">This is block text.</div>
<div class="d-none d-xl-inline-flex">This is inline-flex text.</div>
<div class="d-none d-xl-flex">This is flex text.</div>
<div class="d-none d-xl-grid">This is grid text.</div>
<div class="d-none d-xl-table">This is table text.</div>
<div class="d-none d-xl-table-row">This is table-row text.</div>
<div class="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.
| Utility | Screen Size | Description | Example |
|---|---|---|---|
| d-none | - | Hidden everywhere | |
| d-none d-sm-inline-flex | 0px - 575px | Hidden only on xs | |
| d-sm-none d-md-inline-flex | 576px - 767px | Hidden only on sm | |
| d-md-none d-lg-inline-flex | 768px - 991px | Hidden only on md | |
| d-lg-none d-xl-inline-flex | 992px - 1279px | Hidden only on lg | |
| d-xl-none | 1280px+ | Hidden only on xl | |
| d-inline-flex d-sm-none | 0px - 575px | Visible only on xs | |
| d-none d-sm-inline-flex d-md-none | 575px - 767px | Visible only on sm | |
| d-none d-md-inline-flex d-lg-none | 768px - 991px | Visible only on md | |
| d-none d-lg-inline-flex d-xl-none | 992px - 1279px | Visible only on lg | |
| d-none d-xl-inline-flex | 1280px | Visible only on xl |