Display
Utilities for controlling display
Display
Use display utilites to change default display of the element.
| Class | Properties |
|---|---|
d-block |
display: block; |
d-inline-block |
display: inline-block; |
d-inline |
display: inline; |
d-flex |
display: flex; |
d-inline-flex |
display: inline-flex; |
d-grid |
display: grid; |
d-contents |
display: contents; |
d-list-item |
display: list-item; |
d-none |
display: none; |
Start
d-inline
d-inline-block
d-block
Flex item 1
Flex item 2
Flex item 3
<div class="d-inline box bg-secondary--xlight">d-inline</div>
<div class="d-inline-block box bg-secondary--xlight">d-inline-block</div>
<div class="d-block box bg-secondary--xlight">d-block</div>
<div class="d-flex box">
<div class="box bg-secondary--xlight">Flex item 1</div>
<div class="box bg-secondary--xlight"> Flex item 2</div>
<div class="box bg-secondary--xlight"> Flex item 3</div>
</div>
Responsive display utility
Display utility can be applied for all available breakpoints .
The classes can be used in format d-{breakpoint}-{value}
For reponsive design , apply multiple clases to element accordingly for different breakpoints .
| Class | |
|---|---|
d-block d-xs-none |
hidden only for xs |
d-inline d-sm-block d-xs-block |
block for sm and xs |
d-flex |
flex for all |
d-grid d-md-flex d-sm-flex d-xs-flex |
flex for md,sm,xs |
d-block d-xs-none
d-block d-md-inline-block
d-inline-block d-md-flex
<div class=" d-block d-xs-none ">d-block d-xs-none</div>
<div class=" d-md-block d-inline-block ">d-md-block d-inline-block</div>
<div class=" d-inline-block d-md-flex ">d-inline-block d-md-flex</div>