Display Property

We can use Display Property by various size CSS

Change the value of the display 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.

Notation

Display utility classes that apply to all breakpoints, from xs to xl , have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

As such, the classes are named using the format:

.jds-d-{value} for xs

.jds-d-{breakpoint}-{value} for sm , md , lg and xl.

Common Display properties CSS class

jds-d-none jds-d-inline jds-d-inline-block jds-d-block jds-d-table jds-d-table-row jds-d-table-cell jds-d-flex jds-d-inline-flex

hide on lg and wider screens
hide on screens smaller than lg

You can find Responsive Display properties also, CSS class

jds-d-s-none jds-d-s-inline jds-d-s-inline-block jds-d-s-block jds-d-s-table jds-d-s-table-row jds-d-s-table-cell jds-d-s-flex jds-d-s-inline-flex

jds-d-m-none jds-d-m-inline jds-d-m-inline-block jds-d-m-block jds-d-m-table jds-d-m-table-row jds-d-m-table-cell jds-d-m-flex jds-d-m-inline-flex

....

jds-d-xl-none jds-d-xl-inline jds-d-xl-inline-block jds-d-xl-block jds-d-xl-table jds-d-xl-table-row jds-d-xl-table-cell jds-d-xl-flex jds-d-xl-inline-flex

jds-d-print-none jds-d-print-inline jds-d-print-inline-block jds-d-print-block jds-d-print-table jds-d-print-table-row jds-d-print-table-cell jds-d-print-flex jds-d-print-inline-flex