Bootstrap: Utilities "Display"

Post Views: 9

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:-

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

Display utilities in bootstrap example Download

Author
Recent Posts

vikashdev k

scmGalaxy

Limited Time Offer!

Bootstrap: Utilities “Display”

Syntax:-