×

Html & Html5

The World's best Software Development Study Portal

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


Item 1
Item 2
Item 3

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


Item 1
Item 2
Item 3

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


Item 1
Item 2
Item 3
Item 1
Item 2
Item 3

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


Item 1
Item 2
Item 3
Item 1
Item 2
Item 3

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






Bootstrap 4 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute