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.
- Browser support
- What is Flexbox?
- 12 Column Flexbox Grid
- 3 Main Parts of the Grid: CRC
- What About Column Nesting?
- Quick Start: Bootstrap 4 Book and Toolkit
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
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.
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
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.
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
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.
Familiar with an HTML table structure? The Bootstrap 4 grid system is very similar.
table > tr > td is like
.container > .row > .col-sm-6
This is the parent container that determines if the columns should be full-width or not.
A horizontal wrapping container for the series of columns it contains. It essentially clears the floated columns
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.
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.
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.
- 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-6says 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-gutterson the .row.
- Grid columns without a set width will automatically layout with equal widths.