The layout for the Bootstrap components can be controlled well by using the flex
Bootstrap Flexbox
One of the considerable improvements that were made in Bootstrap 4 from Bootstrap 3 was the change of layout.
Here the layout was changed from floats to Flexbox. When talking about flexible responsive layout structure, The Flexible Box Layout Module is the best option for saving us from complex positioning and floats.
It is necessary to note at this point that the IE versions IE9 and before, do not support Flexbox and Bootstrap 4.
Here’s the sample code for creating a flex-box using the d-flex class
1 2 3 4 5 | <div class="d-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> |
The .d-inline-flex
class can be used to create inline flexbox.
See the code below:
1 2 3 4 5 | <div class="d-inline-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> |
Horizontal Direction
The flex items can be displayed horizontally using .flex-row class.
This is the default alignment.
The .flex-row-reverse
class will right-align the horizontal direction
1 2 3 4 5 6 7 8 9 10 | <div class="d-flex flex-row bg-secondary"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <div class="d-flex flex-row-reverse bg-secondary"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> |
There are two classes to vertically align the flex items. These are
- .flex-column: Displays the flex items vertically
- .flex-column-reverse: Displays the flex items in a reverse the vertical direction:
1 2 3 4 5 6 7 8 9 10 11 | <div class="d-flex flex-column"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <div class="d-flex flex-column-reverse"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> |
Bootstrap Justify Content
The .justify-content-*
classes can be used to change the alignment of the flex items.
The * can for with start (default), end, center, between or around:
1 2 3 4 5 | <div class="d-flex justify-content-start">...</div> <div class="d-flex justify-content-end">...</div> <div class="d-flex justify-content-center">...</div> <div class="d-flex justify-content-between">...</div> <div class="d-flex justify-content-around">...</div> |
Bootstrap Fill / Equal Widths
The .flex-fill
class forces the flex items into equal widths:
1 2 3 4 5 | <div class="d-flex"> <div class="p-2 bg-info flex-fill">Flex item 1</div> <div class="p-2 bg-warning flex-fill">Flex item 2</div> <div class="p-2 bg-primary flex-fill">Flex item 3</div> </div> |
Bootstrap Grow Flex
If you’re unsure about the available space for your for, the .flex-grow-1
allows the flex to take all the remaining space.
In the below example code, We have two flex items taking up their necessary space and the last item taking rest of the available space.
1 2 3 4 5 | <div class="d-flex"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary flex-grow-1">Flex item 3</div> </div> |
You can also use the .flex-shrink-1
class make the flexbox shrink if necessary.
Bootstrap Flex Order
The .order-*
classes
The * is replaceable with numbers 0 to 12. Here, the lowest number is assigned the highest priority and so on.
1 2 3 4 5 | <div class="d-flex bg-secondary"> <div class="p-2 bg-info order-3">Flex item 1</div> <div class="p-2 bg-warning order-2">Flex item 2</div> <div class="p-2 bg-primary order-1">Flex item 3</div> </div> |