Hello and welcome to the second day of Bootstrap 4 🙋🏻 Today we will learn about the Bootstrap 4 Grid, what it is and how you can use it.
The Bootstrap 4 Grid System is used for responsive layouts. A responsive layout represents the way elements align in the page on different resolutions. It is important you understand how to use the grid before learning about any other Bootstrap 4 component. This is because whatever element you will choose to use, you will need to place it somewhere on the screen. Let’s get started!
Photo credit to Animade for his shot.
This article is broken down into the following parts:
The Bootstrap 4 grid consists of containers, rows and columns. We will take them one by one and explain them.
Bootstrap 4 Containers
A Bootstrap 4 container is an element with the class .container. The container is the root of the Bootstrap 4 grid system and it is used to control the width of the layout. It contains all the elements in a page. This means you page should have the following structure: first the body of the HTML page, inside of it you add the container and all the other elements inside the container.
<body>
<div class="container">
...
</div>
</body>
The simple .container class sets the width of the layout depending on the width of the screen. It places the content in the middle of the page aligning it horizontally. There is equal space between the Bootstrap 4 container and the left and the right edge of the page. The .container scales down in width as the screen width narrows and becomes full-width on mobile. The width of the container is defined inside the Bootstrap 4 library for every screen size. You can see the exact sizes here.
A full-width container takes 100% of the screen size regardless of the screen width. To use it you need to add the class .container-fluid. To see the differences between the 2 types of containers, you can open the following pen in your console and switch between screen sizes.
See the Pen Bootstrap 4 Containers by cristina (@cristinaconacel) on CodePen.
<div class="container"> Hello! I am in a simple container. </div> <div class="container-fluid"> Hello! I am in a full-width container. </div>
Bootstrap 4 Rows
Bootstrap 4 rows are horizontal slices of the screen. They are used only as wrappers for columns. To use them, you need the .rowclass.
<div class="row"> ... </div>
They are only used for containing columns. If you place other elements inside the row along with columns you will not get the expected result.
They have to be placed in containers. Containers can hold any element, but a row must be placed inside a container. If you don’t do this, you will get a horizontal scroll on your page. This happens because rows have negative left and right margins of 15. The container has 15px paddings so it counteracts the margins.
The columns have to be children of the row. Otherwise they will not align. The rows and columns are created to work together in this strict hierarchy.
Bootstrap 4 Columns
Basic Columns
See the Pen Bootstrap 4 Basic Columns by cristina (@cristinaconacel) on CodePen.
We can now get to the nice part of this tutorial, the Bootstrap 4 columns. Columns are great! They help you divide the screen horizontally. If you place a single column in your row, it will take up all the width. If you add two columns, they will each take 1/2 from the width. And so it goes for any number of columns.
<div class="container">
<div class="row">
<div class="col">
...
</div>
</div>
<div class="row">
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>
<div class="row">
<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>
</div>
Side note: Columns are not coloured. I just added colours for a more visually compelling description/so they look pretty.
Setting Sizes
Using the .col class sets the with for the column dynamically. That means that depending on the number of columns in a row, the width of a column will be the width of the container divided by the number of columns.
But there is another way to define columns. You can use classes for columns and define their size. By default, the Bootstrap 4 grid consists of 12 columns. You can select any size from 1 to 12 for your column. If you want 3 equal columns, you can use .col-4 for each one (because 3*4 cols each = 12). Or you can set different sizes for them. Here are some examples:
See the Pen Bootstrap 4 Columns with Sizes by cristina (@cristinaconacel) on CodePen.
<div class="row">
<div class="col-6">
...
</div>
<div class="col-6">
...
</div>
</div>
<div class="row">
<div class="col-5">
...
</div>
<div class="col-7">
...
</div>
</div>
<div class="row">
<div class="col-3">
...
</div>
<div class="col-4">
...
</div>
</div>
<div class="row">
<div class="col-6">
...
</div>
<div class="col-7">
...
</div>
</div>
If the sum of the cols in your row doesn’t get to 12, then they don’t fill the whole row. And if it goes beyond 12 then it will move to the next line (it will only display the sum of the first elements <=12 on the first line).
Setting Breakpoints
If you take the example above and want to display it on mobile, you may run into some problems. Displaying 5 columns on mobile will make the content unreadable. This is where one of the most powerful Bootstrap 4 components comes into play. In order to have different layouts on different screens you won’t need to write media queries, instead you can use the column breakpoints.
Let’s say you want to display, for example, 2 columns one after another vertically on small screens and on the same line on bigger screens. You will need to specify the breakpoint where the columns go on the same line.
In our example, we want the columns to arrange horizontally starting with the laptop. The breakpoint for the laptop resolution is .col-lg. If you open the Codepen in another window and see the page with a higher resolution, you will see the columns being aligned horizontally.
See the Pen Bootstrap 4 Columns with Breakpoints by cristina (@cristinaconacel) on CodePen.
The breakpoint for laptops is .col-lg. The code for this example looks like this:
<div class="row">
<div class="col-lg">
...
</div>
<div class="col-lg">
...
</div>
</div>
If you wanted for the 2 columns to go on the same line starting with larger mobile phones (>= 576px) you would use .col-sm, for tablets (>= 768px) .col-md and for extra large screens (>= 1200px) .col-xl.
It is useful to keep in mind that up to the given breakpoint, your columns will align vertically. This is one example of the fact that Bootstrap 4 is mobile-first. The default styling is for mobile devices and you specifically need to write what’s the behaviour for bigger screens. And for the resolutions bigger than your breakpoint they will align horizontally.
Setting Sizes and Breakpoints
You can combine the sizes and breakpoints and use a single class with the format .col-[breakpoint]-[size]. For example, if you want 3 columns of different sizes to align on a row starting with the laptop resolution you need to do this:
<div class="row">
<div class="col-md-4">
...
</div>
<div class="col-md-3">
...
</div>
<div class="col-md-5">
...
</div>
</div>
And the result will look like this:
See the Pen Bootstrap 4 Columns with Sizes and Breakpoints by cristina (@cristinaconacel) on CodePen.
But what if you want to display 1 column per row on mobile devices, 2 columns per row on tablets and 4 starting with laptops? Then you add multiple classes for a single column to describe the behaviour for every resolution. Using multiple classes, you specify that the content will take 6 slots on tablets and 3 on laptops. The result will show like this:
See the Pen Bootstrap 4 Columns with Multiple Breakpoints by cristina (@cristinaconacel) on CodePen.
Please open the CodePen on different screen sizes to see the differences. And here is the code behind it:
<div class="row">
<div class="col-sm-6 col-lg-3">
...
</div>
<div class="col-sm-6 col-lg-3">
...
</div>
<div class="col-sm-6 col-lg-3">
...
</div>
<div class="col-sm-6 col-lg-3">
...
</div>
</div>
As an exercise, you can try and create rows with different number of columns depending on the screensize on your own. You can fork the CodePen above and see its behaviour in your browser console.
Offsetting Columns
If you don’t want your columns to be next to each other, you can use the class .offset-[breakpoint]-[size]together with the .col-[breakpoint]-[size]. Using this class is the same as adding an empty column before your column. Here is a simple example:
See the Pen Bootstrap 4 Offsetting Columns by cristina (@cristinaconacel) on CodePen.
<div class="row">
<div class="col-sm-4 offset-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
</div>
You can use the class on any column in the row. Here are some more examples:
See the Pen Bootstrap 4 Offsetting Multiple Columns by cristina (@cristinaconacel) on CodePen.
<div class="row">
<div class="col-sm-4">
...
</div>
<div class="col-sm-4 offset-sm-4">
...
</div>
</div>
<div class="row">
<div class="col-sm-4 offset-sm-2">
...
</div>
<div class="col-sm-4 offset-sm-2">
...
</div>
</div>
<div class="row">
<div class="col-sm-6 offset-sm-3">
...
</div>
</div>
Nesting Columns
This may come as a surprise, but you can add a row inside a column. That row (which will have the width of its parent column) will then be divided into 12 (smaller) columns that you can reference through the .col-*classes. Let’s take a look at what happens when we add a new row in a column:
See the Pen Bootstrap 4 Nesting Columns by cristina (@cristinaconacel) on CodePen.
<div class="row">
<div class="col-sm-8">
...
<div class="row">
<div class="col-sm-5">
...
</div>
<div class="col-sm-7">
...
</div>
</div>
</div>
</div>
<div class="col-sm-4">
...
</div>
</div>
This wraps up the basic knowledge regarding the Bootstrap 4 responsive grid system. This is a very important piece when learn to design responsively. If you have questions, please let me know in the comments, I will be glad to answer. I hope you will celebrate your achievement 🙂
Photo credit to Jonas Mosesson for his shot.
Further Reading & Watching
- Official Bootstrap Documentation for the Grid
- This Video Tutorial about the Grid from Scrimba
