| flex-*-column | flex column to display content vertically (top to bottom). Responsive variations are sm,md,lg,xl. |
<div class="d-flex flex-column"> <!--default size-->
<div class="d-flex flex-sm-column">...</div> |
|---|
| flex-*-column-reverse | reverse the order of display of columns. |
<div class="d-flex flex-column-reverse"> |
|---|
| flex-*-row | display content horizontally one after the other (side-by-side). Responsive variations are sm,md,lg,xl. |
<div class="d-flex flex-row">
<div class="d-flex flex-md-row">...</div> |
|---|
| flex-*-row-reverse | reverse the order of display of rows. |
<div class="d-flex flex-row-reverse">
<div class="d-flex flex-lg-row-reverse">...</div> |
|---|
| flex-*-nowrap | default setting to display text in the flex container. |
<div class="d-flex flex-nowrap">..</div> |
|---|
| flex-*-wrap | add wrap functionality. Responsive variations – sm, ml, lg, xl |
<div class="d-flex flex-wrap"> ... </div>
<div class="d-flex flex-xl-wrap"> ... </div> |
|---|
| flex-*-wrap-reverse | reverse order display. |
<div class="d-flex flex-wrap-reverse"> ... </div>
<div class="d-flex flex-xl-wrap-reverse"> ... </div> |
|---|
| flex-fill | fill the background with different colors – primary, secondary, info etc… |
<div class="p-2 flex-fill bg-*">Flex item</div> |
|---|
| flex-*-grow-1 | lets the specified element take the entire available space. |
<div class="p-2 flex-grow-1 bg-primary">Flex grow</div> |
|---|
| flex-*-grow-0 | don’t let the items grow on different screens |
<div class="p-2 flex-grow-0 bg-info">dont let me grow</div> |
|---|
| flex-*-shrink-1 | lets the item shrink. |
<div class="p-2 flex-shrink-1 bg-danger">Flex shrink</div> |
|---|
| flex-*-shrink-0 | no shrinking on different screens. |
<div class="p-2 flex-shrink-1 bg-danger">Flex shrink</div |
|---|
| justify-content-*-start | change the alignment of the items (justify to left). |
<div class="d-flex justify-content-start">
<div class="d-flex justify-content-sm-start">...</div> |
|---|
| justify-content-*-end | justify to the end (right). |
<div class="d-flex justify-content-end">
<div class="d-flex justify-content-sm-end">...</div> |
|---|
| justify-content-*-center | center justify the items. |
<div class="d-flex justify-content-center">
<div class="d-flex justify-content-sm-center">...</div> |
|---|
| justify-content-*-between | justify between the items. |
<div class="d-flex justify-content-between">
<div class="d-flex justify-content-sm-between">...</div> |
|---|
| justify-content-*-around | justify space around the items. |
<div class="d-flex justify-content-around">
<div class="d-flex justify-content-sm-around">...</div> |
|---|
| align-content-*-start | control vertical alignment to start (default). |
<div class="d-flex flex-wrap align-content-start">
<div class="d-flex align-content-sm-start">...</div> |
|---|
| align-content-*-end | align content to end. |
<div class="d-flex flex-wrap align-content-end">
<div class="d-flex align-content-sm-end">...</div> |
|---|
| align-content-*-center | align content to the center. |
<div class="d-flex flex-wrap align-content-center">
<div class="d-flex align-content-sm-center">...</div> |
|---|
| align-content-*-around | align space around items. |
<div class="d-flex flex-wrap align-content-around">
<div class="d-flex align-content-sm-around">...</div> |
|---|
| align-content-*-stretch | stretch individual flexbox items. |
<div class="d-flex flex-wrap align-content-stretch">
<div class="d-flex align-content-sm-stretch">...</div> |
|---|
| align-items-*-baseline | align-items with respect to baseline. |
<div class="d-flex flex-wrap align-items-baseline">
<div class="d-flex align-items-sm-baseline">...</div> |
|---|
| align-items-*-stretch | stretch items to the full width of the flex container. |
<div class="d-flex align-items-stretch">
<div class="d-flex align-items-sm-stretch">...</div> |
|---|
| align-self-*-start | self-align individual flex items to start (default). |
<div class="align-self-start">flex item align</div>
<div class="align-self-md-start">...</div> |
|---|
| align-self-*-end | self-align individual flex item to end. |
<div class="align-self-end">flex item align</div>
<div class="align-self-md-end">...</div> |
|---|
| align-self-*-center | self-align individual flex item to centre. |
<div class="align-self-center">flex item align</div>
<div class="align-self-md-center">...</div>
|
|---|
| align-self-*-baseline | self-align individual flex item to baseline. |
<div class="align-self-baseline">flex item align</div>
<div class="align-self-md-baseline">...</div> |
|---|
| align-self-*-stretch | stretch to full width |
<div class="align-self-stretch">flex item align</div>
<div class="align-self-md-stretch">...</div>
|
|---|
| order-*-# | change the order of display of particular flex items from 0-12. |
<div class="order-12">first item</div> <!--will be displayed 12th-->
<div class="order-sm-3">ordered flex item</div> |
|---|
