Bootstrap 4: Regular Grid VS Flexbox Grid
Bootstrap 4 introduced some changes to the grid system we are all so familiar with from version 3. These include a new XL grid tier, alteration to some of the modifier classes, and a brand new flexbox version of the said grid system.
The regular and flexbox grid modes are not compatible, and everyone will have to choose which one to use in their projects. To help you with the decision, in this article we will look at all the differences between the two systems. For easier comparison, we’ve also prepared several grid examples implemented in both modes.
1. Installation
The most common way to include Bootstrap in a project is via CDN or a local source file. There are separate precompiled versions for flex and non-flex:
<!-- Original Bootstrap --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" > <!-- Bootsrap With Flexbox Grid --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap-flex.min.css" rel="stylesheet" >
For those of you who compile their own Bootstrap, you will need to turn on $enable-flex in the main Sass customization file.
_variables.scss
$enable-flex = true;
When it comes to file size, the flexbox version is slightly bigger due to the extra rules and vendor prefixes that are required. However, the margin is quite thin (119 KB compared to 105 KB) and shouldn’t matter in most use cases.
2. Basic Grid
By now everyone knows how the Bootstrap grid works. We’ve got rows separated into 12 equal pieces, and columns that go inside the rows. Each column can take anywhere from 1 to 12 spaces:
<div class="row"> <div class="col-xs-2">.col-xs-2</div> <div class="col-xs-4">.col-xs-4</div> <div class="col-xs-6">.col-xs-6</div> </div>
The new flexbox mode provides us with an auto-layout option where columns can be left without a specified size.
<div class="row">
<div class="col-xs">.col-xs</div>
<div class="col-xs">.col-xs</div>
<div class="col-xs">.col-xs</div>
</div>
Sizeless columns in the flexbox grid will share the available space equally, always taking up the entire row. If we want a column to be bigger or smaller, we can still do that with a .col-xs-size class.
To help you better visualize the two systems, we’ve prepared live demos of both flex and non-flex grids. You can check them out below:
Basic Flex Grid
3. Column Wrapping
When the sum of all columns in a row is over 12, the first extra column will move to the next line. This is knows as column wrapping and works the same way in both regular and flex-bootstrap.
<div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-3">.col-xs-3, This column will move to the next line.</div> </div>
The only thing to note here is that when using flex auto-layout, a sizeless column that took up only a couple of spaces, can take up the entire row once it wraps.
Regular Column Wrapping
4. Responsive Grid
As we mentioned in the intro, Bootstrap 4 has a new XL grid tier on top of the old ones. Now the grid media queries look like this:
- Extra small (xs) – below 576px
- Small (sm) – between 576px and 768px
- Medium (md) – between 768px and 992px
- Large (lg) – between 992px and 1200px
- Extra Large (xl) – over 1200px
Beside the XL tier, there aren’t any other major changes to responsiveness. The regular and flex systems work the same way.
Responsive Flex Grid
5. Column Height
The old grid system was built on floated elements and because of that every column has a different height, depending on the content it holds.
Column Height In Regular Grid
In flexbox layouts all cells in a row are aligned to be as tall as the column with most content.
Column Height In Flex Grid
6. Horizontal Alignment
In non-flex Bootstrap positioning columns horizontally is done via an offset system. Offsets work like empty columns and allow us to move elements to the right (e.g an .offset-xs-3 moves the column 3 spaces to the right). This can be a little annoying as we need to manually adjust the amount of spaces needed.
<div class="row">
<div class="col-xs-6 offset-xs-3">This column is now centered.</div>
</div>
Thanks to the justify-content property, horizontal positioning in flex-strap is as easy as adding the correct class.
<div class="row flex-items-xs-center">
<div class="col-xs-6">All columns in that row will be automatically centered.</div>
</div>
Also, if you want to use offsets you can do that too!
Horizontal Alignment In Flex Grid
7. Vertical Alignment
There are no options for vertical alignment in the regular Bootstrap grid. The only way to do any sort of vertical positioning is using custom CSS and it is often messy.
Flexbox, on the other hand, is great at layout alignment and gives us not one, but two ways to vertically position columns:
Vertically align the whole row:
<div class="row flex-items-xs-middle"> <div class="col-xs"> Middle </div> </div> <div class="row flex-items-xs-bottom"> <div class="col-xs"> Bottom </div> </div> <div class="row flex-items-xs-top"> <div class="col-xs"> Top </div> </div>
Align individual columns within the row:
<div class="row">
<div class="col-xs flex-xs-middle"> Middle </div>
<div class="col-xs flex-xs-bottom"> Bottom </div>
<div class="col-xs flex-xs-top"> Top </div>
</div>
Vertical Alignment In Flex Grid
8. Reordering Columns
With the regular grid system, if we want to swap around the order of columns we need to use push and pull. Although it’s not the best designed solution, it gets the job done.
<div class="row">
<div class="col-xs-4 push-md-8"> On MD screens this column will move 8 spaces to the right. </div>
<div class="col-xs-8 pull-md-4"> On MD screens this column will move 4 spaces to the left.</div>
</div>
Anyone who has used flexbox before knows that it has a built-in order property. The way Bootstrap devs have implemented it is via three ordering classes:
.flex-xs-first– Displayed first..flex-xs-last– Displayed last..flex-xs-unordered– Displayed between first and last.
No manual calculations are required. If you need to order more than 3 columns (which rarely happens) you can use push&pull or the order property via CSS.
Reordering Flex Columns
Conclusion
Looking back at the points covered in the article, its pretty clear that the flexbox mode is the more advanced and versatile grid system. After all, it includes everything from the regular grid with some new flex-only features on top. The only real drawback of going full bootstrap-flex is the lack of support for IE9.
This wraps up our comparison of the new Bootstrap 4 grid systems. Feel free to bookmark the demo page for quick future reference. We hope we’ve been helpful! Happy coding :)