Bootstrap: Utilities "Display"

Posted on September 11, 2021September 11, 2021 | by vikashdev k

Post Views: 20

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	.d-*-inline-flex

Syntax:-

&lt;div class="container mt-4">
  &lt;h2>Display Inline Block&lt;/h2>
  &lt;p>Use the d-inline-block class.&lt;/p>
  &lt;div class="d-inline-block">Inline block DIV.&lt;/div>
  &lt;div class="d-inline-block">Inline block DIV.&lt;/div>
&lt;/div>

Display utilities in bootstrap example Download

Author
Recent Posts

vikashdev k

MOTOSHARE 🚗🏍️

Bootstrap: Utilities “Display”

Syntax:-