Display
Display Mode
d-{MODE} allows you to controls the display mode of elements. Where {MODE} is either
none, inline, inline-block, block, table,
table-row, flex, or inline-flex.
display: none
d-none display: inline
d-inline display: inline-block
d-inline-block display: block
d-block display: table
d-table display: table-row
d-table-row display: flex
d-flex display: inline-flex
d-inline-flex
d-none display: inline
d-inline display: inline-block
d-inline-block display: block
d-block display: table
d-table display: table-row
d-table-row display: flex
d-flex display: inline-flex
d-inline-flex
Code
<span class="d-none"></span>
<span class="d-inline"></span>
<span class="d-inline-block"></span>
<span class="d-block"></span>
<span class="d-table"></span>
<span class="d-table-row"></span>
<span class="d-flex"></span>
<span class="d-inline-flex"></span>
d-{BREAKPOINT}{MODE} allows you to controls the display mode of elements per
breakpoint, where {BREALPOINT} is, s, m, l, xl
and {MODE} is one of the modes listed above.
Available Breakpoints:
s: <= 768pxm: >= 769pxl: >= 1280pxxl: >= 1920px
breakpoint: s
display: none
d-s-none breakpoint: s
display: inline
d-s-inline breakpoint: s
display: inline-block
d-s-inline-block breakpoint: s
display: block
d-s-block breakpoint: s
display: table
d-s-table breakpoint: s
display: table-row
d-s-table-row breakpoint: s
display: flex
d-s-flex breakpoint: s
display: inline-flex
d-s-inline-flex breakpoint: m
display: none
d-m-none breakpoint: m
display: inline
d-m-inline breakpoint: m
display: inline-block
d-m-inline-block breakpoint: m
display: block
d-m-block breakpoint: m
display: table
d-m-table breakpoint: m
display: table-row
d-m-table-row breakpoint: m
display: flex
d-m-flex breakpoint: m
display: inline-flex
d-m-inline-flex breakpoint: l
display: none
d-l-none breakpoint: l
display: inline
d-l-inline breakpoint: l
display: inline-block
d-l-inline-block breakpoint: l
display: block
d-l-block breakpoint: l
display: table
d-l-table breakpoint: l
display: table-row
d-l-table-row breakpoint: l
display: flex
d-l-flex breakpoint: l
display: inline-flex
d-l-inline-flex breakpoint: xl
display: none
d-xl-none breakpoint: xl
display: inline
d-xl-inline breakpoint: xl
display: inline-block
d-xl-inline-block breakpoint: xl
display: block
d-xl-block breakpoint: xl
display: table
d-xl-table breakpoint: xl
display: table-row
d-xl-table-row breakpoint: xl
display: flex
d-xl-flex breakpoint: xl
display: inline-flex
d-xl-inline-flex
display: none
d-s-none breakpoint: s
display: inline
d-s-inline breakpoint: s
display: inline-block
d-s-inline-block breakpoint: s
display: block
d-s-block breakpoint: s
display: table
d-s-table breakpoint: s
display: table-row
d-s-table-row breakpoint: s
display: flex
d-s-flex breakpoint: s
display: inline-flex
d-s-inline-flex breakpoint: m
display: none
d-m-none breakpoint: m
display: inline
d-m-inline breakpoint: m
display: inline-block
d-m-inline-block breakpoint: m
display: block
d-m-block breakpoint: m
display: table
d-m-table breakpoint: m
display: table-row
d-m-table-row breakpoint: m
display: flex
d-m-flex breakpoint: m
display: inline-flex
d-m-inline-flex breakpoint: l
display: none
d-l-none breakpoint: l
display: inline
d-l-inline breakpoint: l
display: inline-block
d-l-inline-block breakpoint: l
display: block
d-l-block breakpoint: l
display: table
d-l-table breakpoint: l
display: table-row
d-l-table-row breakpoint: l
display: flex
d-l-flex breakpoint: l
display: inline-flex
d-l-inline-flex breakpoint: xl
display: none
d-xl-none breakpoint: xl
display: inline
d-xl-inline breakpoint: xl
display: inline-block
d-xl-inline-block breakpoint: xl
display: block
d-xl-block breakpoint: xl
display: table
d-xl-table breakpoint: xl
display: table-row
d-xl-table-row breakpoint: xl
display: flex
d-xl-flex breakpoint: xl
display: inline-flex
d-xl-inline-flex
Code
<span class="d-s-block"></span>
<span class="d-m-block"></span>
<span class="d-l-block"></span>
<span class="d-xl-block"></span>