Display
Defines how an element is displayed on a page.
| d-hidden | A hidden element is not visible and does not allocate space. |
| d-block | A block element starts on a new line. |
| d-block-inline | Inline block is similar to an inline element but properties like width, height and top bottom paddings/margins are respected. |
| d-inline | An inline element does not start on a new line and allocates width as necessary. |
| d-flex | Displays the element as a block level flex container. |
| d-flex-inline | Displays the element as an inline level flex container. |
Flex Position
Specifies how an element is positioned on the screen.
d-flex-row d-flex-col d-flex-x-end d-flex-x-space-between d-flex-x-space-around d-flex-x-space-evenly
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
d-flex-row
<div class="d-flex d-flex-row">
<div class="xx">1</div>
<div class="xx">2</div>
<div class="xx">3</div>
</div>
d-flex-col
<div class="d-flex d-flex-col">
<div class="xx">1</div>
<div class="xx">2</div>
<div class="xx">3</div>
</div>
d-flex-x-end
<div class="d-flex d-flex-x-end">
<div class="xx">1</div>
<div class="xx">2</div>
<div class="xx">3</div>
</div>
d-flex-x-space-between
<div class="d-flex d-flex-x-space-between">
<div class="xx">1</div>
<div class="xx">2</div>
<div class="xx">3</div>
</div>
d-flex-x-space-around
<div class="d-flex d-flex-x-space-around">
<div class="xx">1</div>
<div class="xx">2</div>
<div class="xx">3</div>
</div>
d-flex-x-space-evenly
<div class="d-flex d-flex-x-space-evenly">
<div class="xx">1</div>
<div class="xx">2</div>
<div class="xx">3</div>
</div>| d-flex-row | The main axis is the same as the text orientation, defaulting to left to right. If dir is set to rtl, then the axis direction is from right to left. |
| d-flex-col | The main axis is located vertically and directed from top to bottom. |
| d-flex-wrap | Flexes are arranged in several lines, their direction is specified by the flex-direction property. |
| d-flex-nowrap | Flexes line up in one line. |
| d-flex-x-start | Flexes are pressed to the beginning of the line. |
| d-flex-x-end | Flexes are pressed to the end of the line. |
| d-flex-x-center | Flex lines are aligned to the center of the line. |
| d-flex-x-space-between | Flexes are evenly distributed throughout the line. The first and last element are pressed against the corresponding edges of the container. |
| d-flex-x-space-around | Flexes are evenly distributed throughout the line. The empty space before the first and after the last element is equal to half the space between two adjacent elements. |
| d-flex-x-space-evenly | Flexes are distributed so that the distance between any two adjacent elements, as well as before the first and after the last, is the same. |
| d-flex-y-start | Flexes are aligned at the beginning of the transverse axis of the container. |
| d-flex-y-end | The flexes are aligned at the end of the transverse axis of the container. |
| d-flex-y-center | Flexes are aligned along the transverse axis. |
| d-flex-y-baseline | Flexes are aligned to their baseline. |
| d-flex-y-stretch | Flexes are stretched in such a way as to occupy all the available space of the container. |
| d-flex-self-start | The element is aligned at the origin of the container's transverse axis. |
| d-flex-self-end | The element is aligned at the end of the container's transverse axis. |
| d-flex-self-center | The element is aligned to the centerline on the cross axis. |
| d-flex-self-baseline | The element is aligned to the text baseline. |
| d-flex-self-stretch | The element is stretched in such a way as to occupy all the free space of the container along the transverse axis. |
| d-flex-content-start | The lines are located at the beginning of the transverse axis. Each next line is flush with the previous one. |
| d-flex-content-end | The lines are located starting from the end of the transverse axis. Each previous line is flush with the next. |
| d-flex-content-center | The lines are located in the center of the container. |
| d-flex-content-stretch | The lines stretch evenly to fill the available space. |
| d-flex-content-space-between | The lines are evenly distributed in the container and the distance between them is the same. |
| d-flex-content-space-around | The lines are evenly spaced so that the space between two adjacent lines is the same. The empty space before the first line and after the last line is equal to half the space between two adjacent lines. |
| d-flex-content-space-evenly | The lines are distributed evenly. The white space before the first line and after the last line is the same width as the other lines. |