Bootstrap: Utilities “Display”

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 SizeClass
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>
Latest posts by vikashdev k (see all)
Tagged : / / / / / / / /

Leave a Reply