Bootstrap Flex

Advance Bootstrap uses flexbox, instead of floats, to handle the layout. It is just a container type in which we can keep flext items. To create flexbox container the d-flex class is use.

Let’s understand this by the following program:-

Output of this Program

So here we get our flex container where we can add our items.

inline flexbox container

If we want to add inline flexbox container than there we can use the d-inline-flex class. where the container flexbox width will be upto that much as much as it is necessary.

Let's understand this by the following program:-

Output of this Program

So here we get our inline-flexbox container where we can add our items.

horizontal direction flexbox

If we want to view our flex items horizontally than we can show it from left-align (default one) by using .flex-row class. and the right-align by using .flex-row-reverse class.

Let's understand this by the following program:-

Output of this Program

So here we get our flex items horizontally from both sides.

vertical direction flexbox

If we want to view our flex items vertically than we can show it from top to bottom (default one) by using .flex-column class. and from bottom to top by using .flex-column-reverse class.

Let's understand this by the following program:-

Output of this Program

So here we get our flex items vertically from both sides.