Bootstrap 5 introduced a new feature called "Bootstrap Flexbox", which leverages the power of Flexbox layout to create more flexible and responsive layouts. Flexbox is a CSS layout model that allows items within a container to be dynamically arranged and aligned, making it easier to design complex and responsive user interfaces.
1. Flex Container
In Bootstrap Flexbox, the parent element containing flex items is known as the flex container. To create a flex container, you need to apply the `.d-flex` class to the parent element. This class enables Flexbox behavior on the container and sets its display property to `flex`.
Flex Container Example
Item 1
Item 2
Item 3
2.Flex Items
: Flex items are the child elements of a flex container. These items are the elements that are arranged and aligned within the flex container according to the Flexbox rules. By default, flex items are arranged in a row, but you can change the direction using additional classes.
Flex Items Example
Item 1
Item 2
Item 3
Item 4
Item 5
3.Flex Direction
: Bootstrap provides classes to control the direction of flex items within the flex container. You can use `.flex-row`, `.flex-column`, `.flex-row-reverse`, and `.flex-column-reverse` to specify whether the flex items should be arranged horizontally in a row or vertically in a column.
Flex Direction Example
Row
Item 1
Item 2
Item 3
Column
Item 1
Item 2
Item 3
Row-reverse
Item 1
Item 2
Item 3
Column-reverse
Item 1
Item 2
Item 3
4.Flex Wrapping
: By default, flex items will try to fit into a single line. However, if there's not enough space, they will overflow. Bootstrap provides classes like `.flex-wrap` and `.flex-nowrap` to control whether flex items should wrap onto multiple lines or not.