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 |