Display and Visibility
Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.
Display
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-block.d-inline.d-inline-block.d-table.d-table-row.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).
<div class="d-inline">d-inline</div>
<div class="d-inline">d-inline</div>
<div class="d-inline">d-inline</div>
Responsive variations also exist for every single utility mentioned above with specify suffix.
.d-none-[sm | md | lg | xl | xxl].d-block-[sm | md | lg | xl | xxl].d-inline-[sm | md | lg | xl | xxl].d-inline-block-[sm | md | lg | xl | xxl].d-table-[sm | md | lg | xl | xxl].d-table-row-[sm | md | lg | xl | xxl].d-table-cell-[sm | md | lg | xl | xxl].d-flex-[sm | md | lg | xl | xxl].d-inline-flex-[sm | md | lg | xl | xxl]
* Remember! Responsive utilities works with min-width option.
Touch & no-Touch
You can specify display property depending on the touch or not touch device. To specify this behavior use classes:
For touch
.d-none-touch.d-block-touch.d-inline-touch.d-inline-block-touch.d-table-touch.d-table-row-touch.d-table-cell-touch.d-flex-touch.d-inline-flex-touch
For no touch
.d-none-no-touch.d-block-no-touch.d-inline-no-touch.d-inline-block-no-touch.d-table-no-touch.d-table-row-no-touch.d-table-cell-no-touch.d-flex-no-touch.d-inline-flex-no-touch
Visibility
To change element visibility add class .visible or .no-visible to element. Responsive variations also exist for every single utility mentioned above with specify suffix.
.visible.no-visible.visible-[sm | md | lg | xl | xxl].no-visible-[sm | md | lg | xl | xxl]
* Remember! Responsive utilities works with min-width option.
Change the display and visibility value of elements when printing with our print display utilities.
.d-none-print.d-block-print.d-inline-print.d-inline-block-print.d-table-print.d-table-row-print.d-table-cell-print.d-flex-print.d-inline-flex-print
Display print utilities defined inside the:
@media print {
...
}