Bootstrap 4 Flex Grid

Posted onby admin

Bootstrap 4 makes it even more easy by offering a set of ready made CSS classes for applying Flexbox layout to elements. In the following tutorial we’ll take a deeper look the Bootstrap 4 CSS. The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox, instead of floats, to handle the layout. The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. If you are new to flex, you can read about it in our CSS Flexbox Tutorial. With Bootstrap 4 and its flexbox-based grid, you achieve a more realistic column (just like in a table), as columns in the same row will take the same height. Let’s tackle same-width column. This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. Whereas in Bootstrap 3 we simply specified the width here, in Bootstrap 4 we have this flex specification and an additional max-width property. So, what is this all about? Well, you may have read about the Bootstrap 4 Grid using the CSS flex system. Well, this is it. Let's investigate this further. The CSS Flex Layout System.

Bootstrap 4 brings many changes and new features to the grid system we are all so familiar with from version 3. The new grid is now powered by flexbox, lots of utility classes have been renamed, and a new XL breakpoint has been added.

When we first wrote this article, Bootstrap 4 was supposed to have two separate grids. Shortly after we published it, a new Alpha was released, making flexbox the only layout mode of the framework as well as introducing some new features. We have updated the article to reflect those changes.

1. 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:

Structurally nothing has changed, the grid still has rows and 12 columns. However, there are changes in the width of containers, as well as other small stuff like the lowest breakpoint tier being renamed from .col-xs- to simply .col-

To help you better visualize the changes, we've prepared side-by-side demos of both new flex and old non-flex grids. You can check them out below:

2. Automatic Layout

A cool new feature of the Bootstrap 4 grid is the auto-layout mode. It lets developers leave out the size of columns, making them automatically distribute the space in that row.

Sizeless columns share the available space equally, always filling up the entire row. If we want a column to be bigger or smaller, we can still do that with a .col-size class.

3. Column Wrapping

Flex Row Bootstrap

When the sum of all columns in a row is over 12, the first extra column will move to the next line. This is known as column wrapping and works the same way it did in non-flexbox bootstrap.

Bootstrap 4 Flex Vs Grid

The only thing to note here is that when using the auto layout, a sizeless column that took up only a couple of spaces, can take up the entire row once it wraps.

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

Other than that, there haven't been any changes to the way responsiveness works.

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.

In flexbox layouts all cells in a row are aligned to be as tall as the column with most content.

6. Horizontal Alignment

In old 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 .col-xs-offset-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.

Thanks to the justify-content property, horizontal positioning in flex-strap is as easy as adding the correct class.

Also, if you want to use offsets, you can still do that as well! Just keep in mind that the classes are now shortened to .offset-xs-*.

7. Vertical Alignment

There are no options for vertical alignment in the Bootstrap 3 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:

Bootstrap Flex Layout

Align individual columns within the row:

8. Reordering Columns

With the old grid system, if we wanted to swap around the order of columns we needed to use push and pull while manually adjusting the correct amount of places to move left and right.

Bootstrap 4 Flex Grid Youtube

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-first - Displayed first.
  • .flex-last - Displayed last.
  • .flex-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.

Bootstrap 4 Flex Grid

Conclusion

Looking back at the points covered in the article, its pretty clear that going full flexbox brings a lot of great features and makes the grid system much more advanced and versatile. The only real drawback is the lack of support for IE9 and older browsers (all modern clients have full flexbox compatibility), if you don't have to support those you're good to go.

Flex

This wraps up our introduction to the new Bootstrap 4 grid system. Feel free to bookmark the demo page for quick future reference. We hope we've been helpful! Happy coding :)

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Learn more

Bootstrap Tutorial

BS4 HomeBS4 Container

BS4 Borders

BS4 Border AdditiveBS4 Border SubtractiveBS4 Border ColorBS4 Border Radius

BS4 Float

BS4 floatBS4 clearfix

BS4 Close icon

BS4 Close Icon

BS4 Colors

BS4 ColorBS4 Background color

BS4 Display

BS4 Display NotationBS4 Display in Print

BS4 Embed

BS4 embed

BS4 Flex

BS4 FlexBS4 Flex DirectionBS4 justify-contentBS4 align-itemsBS4 align-selfBS4 align-contentBS4 Flex GrowBS4 Flex ShrinkBS4 Flex FillBS4 Flex WrapBS4 OrderBS4 Auto Margins

BS4 Sizing

BS4 WidthBS4 Height

BS4 Spacing

BS4 MarginBS4 PaddingBS4 Horizontal centering

BS4 Text

BS4 Text alignmentBS4 Text wrappingBS4 Text transformBS4 Font weight and italicsBS4 Text decorationBS4 Text resetBS4 Text monospace

BS4 Alignment

BS4 Vertical alignment

BS4 Visibility

BS4 Visibility

BS4 Overflow

BS4 Overflow

BS4 Link

BS4 Stretched Link

BS4 Shadow

BS4 Shadow

BS4 Position

BS4 Position

BS4 Typography

BS4 Typography HeadingsBS4 Typography Custom HeadingsBS4 Typography Display HeadingsBS4 Typography LeadBS4 Typography Inline textBS4 Typography AbbreviationsBS4 Typography BlockquotesBS4 Typography List UnstyledBS4 Typography List Inline

BS4 Code

BS4 Code InlineBS4 Code BlocksBS4 Code VariablesBS4 Sample OutputBS4 User input

BS4 Image

BS4 Image ResponsiveBS4 Image Thumbnails

BS4 Figures

BS4 Figure

BS4 Grid

BS4 Grid

BS4 Media Object

BS4 Media Object

BS4 Table

BS4 TableBS4 Table HeadBS4 Table CaptionsBS4 Table Responsive

BS4 Components

BS4 AlertBS4 BadgeBS4 BreadcrumbBS4 ButtonBS4 Button GroupBS4 CardBS4 CarouselBS4 CollapseBS4 DropdownBS4 FormBS4 Input GroupBS4 JumbotronBS4 List GroupBS4 ModalBS4 NavsBS4 NavbarBS4 PaginationBS4 PopoversBS4 ProgressBS4 SpinnersBS4 TooltipsBS4 ToastsBS4 Scrollspy