Flex model
Bootstrap has many classes that work with the css flex model.
flexible containers
Class names match to following formulas:
- d-{breakpoint}-{value}
- flex-{breakpoint}-{value}
| css class | description |
|---|---|
| d-flex | Specifies that element is flexible container for block elements. |
| d-inline-flex | Specifies that element is flexible container for inline elements. |
| flex-row | Horizontal direction, this is by default. |
| flex-row-reverse | Horizontal direction from right to left. |
| flex-column | Vertical direction. |
| flex-column-reverse | Vertical direction from bottom to up. |
| flex-wrap | Items are laid out in multiple lines when necessary. |
| flex-nowrap | Items are laid out in a single line, this is by default. |
| flex-wrap-reverse | Items are laid out in multiple lines when necessary in reverse order. |
aligning along main axis
Class names match to following formulas:
- justify-content{-breakpoint}{-value}
- flex{-breakpoint}-grow-{0|1}
- flex{-breakpoint}-shrink-{0|1}
- flex{-breakpoint}-fill
| css class | description |
|---|---|
| justify-content-start | Arranges items from the beginning of the direction (default value). |
| justify-content-end | Arranges items from the end of the direction. |
| justify-content-center | Items are centered along the line. |
| justify-content-between | Items are evenly arranged along the line. First and last items on the line are aligned to edge of container. |
| justify-content-around | Items are evenly arranged along the line. They have half-size space around them. It means that space between first/last item and container on line equal to half space between items. |
| flex-fill | Causes items to have the same width. |
| flex-grow-1 | Causes item to take up the rest of the space. Should be applied to the flex item. |
| flex-shrink-1 | Shrinks the item as needed. Should be applied to the flex item. |
aligning along cross axis
Class names match to following formulas:
- align-items{-breakpoint}{-value}
- align-self{-breakpoint}{-value}
| css class | description |
|---|---|
| align-items-start | Arranges items from the beginning of cross axis. |
| align-items-end | Arranges items from the end of the cross axis. |
| align-items-center | Items are centered along the cross axis. |
| align-items-baseline | Arranges items so that their baselines line up with the baseline of the container. |
| align-items-stretch | Items will be stretched to fit container in the cross axis (default value). |
| align-self-start | Arrange item from the beginning of cross axis. Should be applied to the flex item. |
| align-self-end | Arrange item from the end of the cross axis. Should be applied to the flex item. |
| align-self-center | Item are centered along the cross axis. Should be applied to the flex item. |
| align-self-baseline | Arranges item so that its baseline line up with the baseline of the container. Should be applied to the flex item. |
| align-self-stretch | Item will be stretched to fit container in the cross axis (default value). Should be applied to the flex item. |