How to put items underneath each other flex box in Bootstrap 4 ?

Flexbox in Bootstrap 4: From bootstrap 3 to bootstrap 4 amazing change has occurred that bootstrap 4 can utilize flexbox to handle the layout of content. The FlexBox Layout Module makes it easier to design a flexible responsive layout structure.

Approach: Place the direction of flex items in a flex container with direction utilities. In most cases, you will be able to exclude the horizontal class as the browser default is a row. In any case, you will experience circumstances where you required to explicitly set this esteem (like responsive layouts).

The following Examples represent different ways to put items underneath each other in a Flex-Box.

Example 1: Use .flex-column class to put items underneath each other.

<div class="d-flex flex-column"></div>

Output:

👁 Image

Example 2: You can also use the .flex-column-reverse class to put items underneath each other in reverse order. Displaying flex-box in reverse order.

Output:

👁 Image

Example 3: By using flex-direction: column; and align-items: center; you can place items underneath each other in the center. Thus, as shown below, we can place icons or images underneath each other using flexbox in bootstrap 4.

Output:

👁 Image