Bootstrap utility display changes the value of the property with our responsive display utility classes. We purposely support only a subset of all possible values for display. Classes can be combined for various effects as you need.
Screen Size
Class
Hidden an element
.d-none
Hides an element on a specific screen size
.d-*-none
Hidden only on xs
.d-none .d-sm-block
Hidden only on sm
.d-sm-none .d-md-block
Hidden only on md
.d-md-none .d-lg-block
Hidden only on lg
.d-lg-none .d-xl-block
An element inline
.d-inline
An element inline on a specific screen size
.d-*-inline
An element inline-block
.d-inline-block
An element inline-block on a specific screen size
.d-*-inline-block
An Element display as a table
.d-table
An element display as a table on a specific screen size
.d-*-table
An element display as a table cell
.d-table-cell
An element display as a table cell on a specific screen size
.d-*-table-cell
An element display as a table row
.d-table-row
An element display as a table row on a specific screen size
.d-*-table-row
Creates a flexbox container and transforms direct children into flex items
.d-flex
Creates a flexbox container on a specific screen size
.d-*-flex
Creates an inline flexbox container
.d-inline-flex
Creates an inline flexbox container on a specific screen size