Sign in


Sign up


Display property

Bootstrap display is a property which applies to many elements and specifies the type of rendering box used for an element.


Common display values

The display property accepts a handful of values and we support many of them with utility classes. We purposefully don’t provide every value as a utility, so here’s what we support:

  • .d-none
  • .d-inline
  • .d-inline-block
  • .d-block
  • .d-table
  • .d-table-cell
  • .d-flex
  • .d-inline-flex

Put them to use by applying any of the classes to an element of your choice. For example, here’s how you could use the inline, block, or inline-block utilities (the same applies to the other classes).

Inline
Inline
                
<div class="d-inline bg-success">Inline</div>
<div class="d-inline bg-success">Inline</div>
            
Block
                
<span class="d-block bg-primary">Block</span>
            

inline-block

Boot that strap!

inline-block

Strap that boot!
                
<div class="d-inline-block bg-warning">
  <h3>inline-block</h3>
  Boot that strap!
</div>
<div class="d-inline-block bg-warning">
  <h3>inline-block</h3>
  Strap that boot!
</div><
            

Responsive variations also exist for every single utility mentioned above.

  • .d-none
  • .d-inline
  • .d-inline-block
  • .d-block
  • .d-table
  • .d-table-cell
  • .d-flex
  • .d-inline-flex
  • .d-sm-none
  • .d-sm-inline
  • .d-sm-inline-block
  • .d-sm-block
  • .d-sm-table
  • .d-sm-table-cell
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-none
  • .d-md-inline
  • .d-md-inline-block
  • .d-md-block
  • .d-md-table
  • .d-md-table-cell
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-none
  • .d-lg-inline
  • .d-lg-inline-block
  • .d-lg-block
  • .d-lg-table
  • .d-lg-table-cell
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-none
  • .d-xl-inline
  • .d-xl-inline-block
  • .d-xl-block
  • .d-xl-table
  • .d-xl-table-cell
  • .d-xl-flex
  • .d-xl-inline-flex

Display in print

Change the display value of elements when printing with our print display utilities.

Class Print style
.d-print-block Applies display: block to the element when printing
.d-print-inline Applies display: inline to the element when printing
.d-print-inline-block Applies display: inline-block to the element when printing
.d-print-none Applies display: none to the element when printing