YouTip

Bootstrap 5 Flex Layout Bootstrap 5 controls page layout using flex classes. * * * ## Flexbox The biggest difference between Bootstrap 3 and Bootstrap 4/5 is that Bootstrap 4/5 uses Flexbox for layout instead of floats. Flexbox is a new CSS3 layout mode better suited for responsive design. If you're not familiar with flex, you can read our (#) tutorial. > **Note:** Flexbox is not supported in IE9 and below. So if you need to support IE8-9, please use (#). The following example uses the `d-flex` class to create a flex container and sets three flex items: ## Example [Try it out »](#) To create a flex container that displays on the same line, use the `d-inline-flex` class: ## Example [Try it out »](#) * * * ## Horizontal Direction The `.flex-row` class sets flex items to display horizontally, which is the default. Use the `.flex-row-reverse` class to align them to the right, i.e., opposite to the `.flex-row` direction. ## Example [Try it out »](#) * * * ## Vertical Direction The `.flex-column` class sets flex items to display vertically, and `.flex-column-reverse` reverses their order: ## Example [Try it out »](#) * * * ## Content Alignment The `.justify-content-*` class modifies the alignment of flex items. The `*` placeholder accepts the following values: **start (default), end, center, between, or around**: ## Example [Try it out »](#) * * * ## Equal Width The `.flex-fill` class forces all flex items to have equal width: ## Example [Try it out »](#) * * * ## Grow The `.flex-grow-1` class allows an item to grow and take up remaining space. In the following example, the first two items only take up the space they need, while the last one takes up the remaining space: ## Example [Try it out »](#) **Tip:** Use `.flex-shrink-1` to set shrink rules for child elements. * * * ## Order The `.order` class sets the order of flex items, ranging from `.order-1` to `.order-12`. Lower numbers have higher priority (`.order-1` comes before `.order-2`): ## Example [Try it out »](#) * * * ## Margins The `.ms-auto` class sets the right margin of an item to **auto** (`margin-right: auto !important;`). The `.me-auto` class sets the left margin to **auto** (`margin-left: auto !important;`): ## Example [Try it out »](#) * * * ## Wrapping To wrap flex items inside a container, use one of the following classes: `.flex-nowrap` (default), `.flex-wrap`, or `.flex-wrap-reverse`. This determines whether the flex container is single-line or multi-line. ## Example [Try it out »](#) * * * ## Align Content You can use `.align-content-*` to control how flex items stack vertically. Available values include: `.align-content-start` (default), `.align-content-end`, `.align-content-center`, `.align-content-between`, `.align-content-around`, and `.align-content-stretch`. These classes are ineffective when there is only one row of flex items. ## Example [Try it out »](#) * * * ## Align Items To align items in a single row, use the `.align-items-*` class. Available values include: **.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, and .align-items-stretch (default)**. ## Example [Try it out »](#) * * * ## Align Self To align a specific flex item, use the `.align-self-*` class. Available values include: `.align-self-start`, `.align-self-end`, `.align-self-center`, `.align-self-baseline`, and `.align-self-stretch` (default). ## Example [Try it out »](#) * * * ## Responsive Flex Classes We can set flex classes based on different devices to achieve responsive layouts. In the table below, the `*` placeholder can be replaced with `sm`, `md`, `lg`, or `xl`, corresponding to small, medium, large, and extra-large devices respectively. | Class | Example | Description | | --- | --- | --- | | Flex Container | | `.d-*-flex` | Creates a flex container based on screen size | (#) | | `.d-*-inline-flex` | Creates an inline flex container based on screen size | (#) | | Direction | | `.flex-*-row` | Displays flex items horizontally based on screen size | (#) | | `.flex-*-row-reverse` | Displays flex items horizontally based on screen size, aligned to the right | (#) | | `.flex-*-column` | Displays flex items vertically based on screen size | (#) | | `.flex-*-column-reverse` | Displays flex items vertically based on screen size, in reverse order | (#) | | Justify Content | | `.justify-content-*-start` | Displays flex items at the start based on screen size (left-aligned) | (#) | | `.justify-content-*-end` | Displays flex items at the end based on screen size (right-aligned) | (#) | | `.justify-content-*-center` | Centers flex items within the container based on screen size | (#) | | `.justify-content-*-between` | Distributes flex items evenly with space between them based on screen size | (#) | | `.justify-content-*-around` | Distributes flex items evenly with space around them based on screen size | (#) | | Equal Width | | `.flex-*-fill` | Forces equal width based on screen size | (#) | | Grow