Bootstrap Flex

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


  Flex item 1
  Flex item 2
  Flex item 3

The .d-inline-flex class can be used to create inline flexbox.

See the code below:


  Flex item 1
  Flex item 2
  Flex item 3

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


  Flex item 1
  Flex item 2
  Flex item 3


  Flex item 1
  Flex item 2
  Flex item 3

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:


  Flex item 1
  Flex item 2
  Flex item 3



  Flex item 1
  Flex item 2
  Flex item 3

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:

...
...
...
...
...

Bootstrap Fill / Equal Widths

The .flex-fill class forces the flex items into equal widths:


  Flex item 1
  Flex item 2
  Flex item 3

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.


  Flex item 1
  Flex item 2
  Flex item 3

You can also use the .flex-shrink-1 class make the flexbox shrink if necessary.

Bootstrap Flex Order

The .order-* classes helps us change the visual order of some flex.

The * is replaceable with numbers 0 to 12. Here, the lowest number is assigned the highest priority and so on.


  Flex item 1
  Flex item 2
  Flex item 3