Bootstrap 4 Grid Flexbox Tutorial with Layout Examples

Bootstrap 4 Grid Flexbox Tutorial with Layout Examples

The most important element of any CSS framework is the grid system. The Bootstrap 4 grid system has been used on many websites worldwide which makes it extremely stable. This cross-browser support is why you probably are considering using Bootstrap for your website (it was for me). In this post I will provide an overview of the grid and provide examples to help you quickly apply it to your projects.

Sections

Have you used Bootstrap before?

If you have used a previous version of Bootstrap, the major changes are the addition of the new xl grid tier and moving to flexbox instead of floats. The xl grid tier name implies its accommodating larger screens but it actually is the opposite. Bootstrap 4 adds another small screen size and shifting everything to the right. This new breakpoint will help give more control to smaller screens.

Before you begin you need to know what set of web browsers you are going to support. This will determine what browsers you actively test because a large percentage of your users will use one of these browsers.

What Versions of Internet Explorer Do You Need to Support?

So how do you know what browsers to support? If you are redesigning an existing site, I suggest looking at your Google Analytics to see what browser the majority of your site visitors use. Look for trends to determine if you remove support for an older browser because it is trending downward quickly.

If you have no analytics to work with I suggest looking at StatCounter to see the top browsers in your country. But from my experience, it is best to have a clear understanding of your ideal site visitor. Because there are a lot of factors, tools like StatCounter do not factor in. One of those being corporate environments that are slow to upgrade to newer browsers. For example, my workplace currently has Windows 7 with IE8.

Once you have your data and some assumptions follow this little decision tree to determine what Bootstrap version you should use.

Bootstrap Version Decision Table

bootstrap 4 ie support

What is Flexbox and How is it Different from Floats?

In Bootstrap 3 and for the majority of websites, the only way to build multi-column layouts was to set column widths and use floats. Then on mobile, you would just remove the float and width property so that it would change to be one column.

bootstrap 4 flexbox vs floats
Demonstrates how a flexbox grid adjusts the height of sibling columns while a float grid does not. Top: Float columns; Bottom: Flexbox columns

Now with flexbox, or flexible box, you will be able to build complex grid layouts with more control and flexibility to adapt the layout as the viewport changes. If you are familiar with an UL and LI relationship, flexbox is very similar to how it has sub items or flexbox items inside a parent wrapping container. But since flexbox is a display property it can be applied to any parent and child HTML elements and does not have its own HTML element like <flexbox>.

flexbox vertical alignment
One of the most exciting features of flexbox is how it handles vertical alignment.

 

Keep in mind, Bootstrap is a CSS framework that builds upon the core language of CSS. So flexbox is the core CSS technology that Bootstrap uses for grid layout and is not a component created by Bootstrap. So it is helpful to know the fundamentals of flexbox in case you need to override something.

 

Bootstrap 4 Book
& Starter Templates

Learn by building a CMS admin dashboard and marketing homepage step by step.

Shop Now

 

12 Column Bootstrap 4 Flexbox Grid

So now that you understand flexbox and why it’s superior to floats for layout, let’s look at how Bootstrap uses this for their grid system.
The Bootstrap grid system is based on a 12 column grid because the number 12 is divisible by 12, 6, 4, 3, 2. So your column sizes inside each row will need to equal 12. This math makes the grid more flexible for a wide range of layouts.

Common Grid Layout Examples:

  • 2 column grid
    .col-sm-6 + .col-sm-6 = 12
  • 2 column golden ratio grid
    .col-sm-8 + .col-sm-4 = 12
  • 3 column grid
    .col-sm-4 + .col-sm-4 + .col-sm-4 = 12
bootstrap 4 grid examples
I created this pen that has a collection of common grid structures to help you visualize how to build them.

The Bootstrap Grid System Has 3 Main Parts: CRC

When working with the Bootstrap 12 column grid you have to keep in mind the order of elements and that there are always three parts: a Container, a Row, and any number of Columns. CRC.

If you want all of your page content to be constrained to a max-width, you would just need one .container on your entire page. Then use a series of row blocks with column divs to build your grid. If your design has no horizontal color banding you could set .container to the body tag. However, there is a trend to have horizontal background colors with the content set to a max-width. The way I achieve this effect is using a section tag with a background color set to it.

Section with a background color to achieve color banding and constrained content.

 

Familiar with an HTML table structure? The Bootstrap 4 grid system is very similar.

For example:

table > tr > td is like .container > .row > .col-sm-6

Container.container or .container-fluid

This is the parent container that determines if the columns should be full-width or not.

Row – .row

A horizontal wrapping container for the series of columns it contains. It essentially clears the floated columns

Column – .col-*-*

A column is a vertical division similar to a table cell. This is where your content goes and has built-in margin to the left and right to prevent text and images from touching each other. The default grid uses floating divs to achieve the horizontal columns.

Columns also have grid tiers which tell the columns how they should look at different breakpoints. In the example below I used .col-sm-6 which essentially says, “When the browser window is 576px or higher make this column span 6 of the 12 columns. For anything below 576px make it full width.” So when you declare a grid tier you are saying make it this size for the specified tier and up.

bootstrap 4 grid breakpoints

Bootstrap 4 Breakpoints

xs = Extra small <576px
sm = Small ≥576px
md = Medium ≥768px
lg = Large ≥992px
xl = Extra large ≥1200px
bootstrap 4 grid

Bootstrap 4 Grid Examples

bootstrap 4 grid

Grid examples showing the difference between the .container and the container-fluid classes

What About Bootstrap 4 Column Nesting?

You can achieve column nesting by adding a .row and columns inside another column. Read the documentation for further examples.

bootstrap 4 grid

View Codepen Demo

Summary

Well, you should now have a good understanding of Bootstrap 4 CSS Grid System and be confident to use it in your next project. It is extremely customizable and helps you be more efficient in building a page layout.

Key points

  • Uses a 12 column grid and the number of columns have to equal 12
  • CRC – .container > .row > .col-*-*
  • Most projects will just need one .container unless you want to do colored row banding
  • Setting a grid tier like .col-sm-6 says for sm and up
  • Columns have horizontal padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with .no-gutters on the .row.
  • Grid columns without a set width will automatically layout with equal widths.

This is an excerpt taken from my Bootstrap 4 Quick Start, where you can learn how to build a responsive homepage and admin dashboard using Bootstrap 4.



Written by: Jake Lett
I share digital marketing tips and HubSpot tutorials to help marketers and business owners grow their business.

Tags: , ,