How does display property works in Bootstrap?

Web Development
,
#1

The display property in Bootstrap is used to set an element’s display property. The utilities such as block, inline etc are to set the element’s display property.

The display property classes of bootstrap help to directly set the CSS display property for an element.

The available classes are:

  • d-block: This class when used with an element, sets it display property to block. Using this class with an element is equivalent to the below styling:

style = “display: block;”

  • d-inline: This class when used with an element, sets it display property to inline. Using this class with an element is equivalent to the below styling:

style = “display: inline;”

  • d-inline-block: This class when used with an element, sets it display property to inline-block. Using this class with an element is equivalent to the below styling:

style = “display: inline-block;”

Syntax:

<div class=”d-inline”> Inline </div> 
// for inline display 
<div class=”d-block”> Block </div> 
// for block display 
<div class=”d-inline-block”> Inline Block </div> 
// for inline-block display