Bootstrap 4 Grid System
When designing a web page, designers and developers highly depend on the Grid System.They are used to create different layouts for a web page. They help in arranging the content of a website in a modular way. Thus improving the user experience. Much like those used in the print media to improve the readablity for the users.
Grids are unavoidable when it comes to creating a responsive web design. It allows the designers and developers to arrange the content in a layout that are well suited for devices as we scale up or down the size of the viewports
Let's begin with understanding what the Bootstrap grid system is. Bootstrap uses a 12 column grid system to create the layout of a website. You can think of the viewport of a device made up of 12 columns and we arrange our contents in these 12 columns. Each column has a small space in between them, they are called gutters.
The reason we use a 12 column grid is that 12 is divisible by many numbers. Say, for example, if you want a layout of content that takes up half of the viewport each, then you can use 6 grid columns for each of the content. Similarly, if you want a 3 column layout for your page you can use 4 grid columns for your content.
Simply put, you have 12 columns that make up your page. You want a layout in which your content, let's say, for example, takes three columns in a row. So, you have 12 grids of a page and you want to divide it into three. So you will be taking up 4 grids for each of your content. It just takes a little bit of arithmetic.
It's not necessary that we use only grids of equal width. You can mix and match and create columns that have different widths. Like in a page you can create a sidebar that takes up 4 columns and the rest of the 8 columns is used for some content like a blog, a picture gallery or a dashboard.
Responsive Grid
The grid system that we use for one device would not be ideal for another with a different screen size. So, if a page takes up a certain layout for a desktop, it may create a bad user experience in a mobile because it may require the user to zoom in and out or scroll sideways and back, and vice versa. So the ideal case is a website that changes its layout automatically that suits best for the device it is viewed on.
Bootstrap grid system helps create a responsive layout very easily and quickly with Bootstrap's responsive grid classes.
Responsive Breakpoints
Since Bootstrap 3, the grid system became responsive. In Bootstrap 2 the grid system was fixed by default. Bootstrap 4 has brought some significant changes to the grid system. It has introduced another break point class to include extra small devices, and flexbox, making it easier to create grids of equal height and width.
Breakpoints are the device viewport width from which point you want your layout to change. These breakpoints are measured in terms of pixels. So if a device's screen size is more than a particular breakpoint the layout of the web page changes to that is most appropriate to give the best user experience.
Note: Although the primary CSS units in Bootstrap 4 has changed to em and rem, pixels are used in the container widths snd breakpoints. this is because the viewports are measured in pixels and are not affected by the font size.
Bootstrap 4 has brought a lot of changes in the grid systems from Bootstrap 3 as well. Apart from improving and stabilizing some grid behaviours, new classes also have been added.
Bootstrap 4 introduces a new breakpoint class, xl. So from now on the breakpoint for large desktops will be xl. for medium desktop will md and so on. So effectively, Bootstrap has not added an extra class for extra large desktop but a breakpoint for extra small devices. So the class xs is, for now, devices with a screen size of less than 576 pixels. All the other breakpoints just jumped up a class.
|
Extra small
<576px |
Small
≥576px |
Medium
≥768px |
Large
≥992px |
Extra large
≥1200px |
|
|---|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | |||
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| # of columns | 12 | ||||
| Gutter width | 30px (15px on each side of a column) | ||||
| Nestable | Yes | ||||
| Offsets | Yes | ||||
| Column ordering | Yes | ||||
Basic HTML Structure for Creating a Grid
First, we will create a row in which we will arrange our content. This row will be divided into columns according to the layout.
A row is always created inside a container. The container is like a wrapper that covers the grid. You can use either the class .container for a fixed width or the class .container-fluid for full width. The class .row creates a horizontal row into which you can place your content in different columns.
Creating Two-Column Layout
To create a two column layout, first, we define a row inside a container. Now, the content will be placed two per row for medium and larger sized devices. For devices smaller than that the contents will be stacked on top of each other.
So we have a paragraph and a heading to it. This content will sit inside a container with class .col-md-6. Here, the col is the column, md define the breakpoint being medium and 6 is the number of grid columns it is taking up.
The below code creates a row with two columns of equal width.
Heading 1
This is an example of grid with two equal columns
Heading 2
This is an example of grids with two equal columns
Creating Three Column Layout
Here, we create a grid layout in which contents sits three per row for medium and larger devices. For smaller devices, the contents will be stacked on top of each other in three rows.
Here, the content is placed inside a div with the class .col-md-4/. 4 being the number of grid columns that the content is taking.
Heading 1
This is an example for grid with three equal columns
Heading 2
This is an example for grid with three equal columns
Heading 3
This is an example for grid with three equal columns
Creating Multiple Rows
Creating multiple rows is just as easy. All you need to do is define another row within the container and place the contents of that row inside it.
Heading 1
This is the first row with three equal columns
Heading 2
This is the first row with three equal columns
Heading 3
This is the first row with three equal columns
Heading 4
This is the second row with three equal columns.
Heading 5
This is the second row with three equal columns
Heading 6
This is the second row with three equal columns
Creating Columns of Unequal Width
You are not limited to create columns of equal width in a row. You can distribute the content in an uneven fashion within the grids.
Here, in the example, the first column takes up three grids, the second column takes up 6 grids and is wider, and the third column takes up another three grids. You can create a 4-8 row, or 3-9 or 3-6 or 2-6-4 row or any way you want to. Make sure the grids do not exceed 12.
Since Bootstrap is flex by default, the columns of a row will be of equal height, no matter the size of the content.
Heading 1
This section takes 3 columns of the grid
Heading 2
This section takes 6 columns of the grid
Heading 3
This section takes 3 columns of the grid
Column Offsets
If you need your content to be placed certain grids off from left, you can do so with .offset-md-* classes. This class will create a left margin of * to your content.
Heading 2
This section takes 3 columns of the grid
Heading 2
This section takes 3 colums of the grid and is offset by 4 columns
Creating a Nested Grid
You can define a row within a row. So here in the example, we have a row that has two columns. We are nesting a row in the second column of the row. So we treat the second column as having an entire 12 grid and then place the nested content within it.
We can also create columns of unequal width or offset the columns within the nested rows.
Heading 1
This section takes 3 columns of the grid
Heading 2
This section takes 9 columns of the grid
Nested Grid Heading 1
This nested section takes 6 columns of the grid within the row
Nested Grid Heading 2
This nested section takes 6 columns of the grid within the row
Push and Pull
You can rearrange the contents with .push-md-* and .pull-md-* classes. You will need a little bit of arithmetic if you do not need your contents to overlap.
Heading 1
This column takes 3 columns of the grid and is pushed by 9 columns
Heading 2
This column takes 9 columns of the grid and is pulled by 3 columns
No Gutters
The space between two columns is called a gutter. The default size of the gutter is 30px, i.e., 15 pixels each before and after a column. You can modify this gutter width or remove it completely. Bootstrap 4 has a class to remove the gutter width. The class .no-gutter can be used to remove the gutter between two columns.
Heading 1
This column does not have any gutter space
Heading 2
This column does not have any gutter space
Responsive Utility Classes
Responsive utility classes can be used to show or hide certain content when the device width above or below a particular breakpoint.
The class .hidden-*-down is used to hide content below the given breakpoint. So for example, .hidden-md-down hides a content if the device has a screen width of 768 pixels or lower.
The class .hidden-*-up is used to hide content above the given breakpoint. So .hidden-md-down hides the content if the device had a screen width above 768 pixels.
To show a content between an interval of breakpoints you can combine the utility classes .hidden-*-up and .hidden-*-down. For example, .hidden-md-down.hidden-xl-up will make the content only visible for large viewports.
| .hidden-xs-down | The content is hidden for extra small devices and visible for small, medium, large and extra-large devices. |
| .hidden-sm-down | content hidden for small devices and extra small devices. Visible on medium, large and extra-large devices. |
| .hidden-md-down | content hidden for medium and lower viewport devices, visible only for large and extra-large devices. |
| .hidden-lg-down | content visible for large device. The content is hidden for large and lower sized devices. |
| .hidden-xl-down | Content is hidden on all devices. |
| .hidden-xs-up | Content is hidden on all devices. |
| .hidden-sm-up | Content is hidden for all devices except for extra small devices. |
| .hidden-md-up | the content is visible for small and extra small devices and hidden for medium, large, and extra-large devices. |
| .hidden-lg-up | the content is only hidden for large and extra large devices. |
| .hidden-xl-up | content is only hidden for extra large devices. |
Resize the window of your browser or view in different screen sized devices to see the hidden and visible content.
Heading 1
This section is hidden for medium, and smaller devices.
Heading 2
This section is visible on all devices.
Heading 3
This section is hidden for large and extra large devices.
Print Classes
Similar to responsive utility classes there are utility classes that make certain content visible on print and hidden on the browser.
| .visible-print-block | the content is hidden on the browser and visible on print as a block element. |
| .visible-print-inline | the content is hidden on the browser and visible on print as an inline element. |
| .visible-print-inline-bock | the content hidden on browser and visible on print and inline-block element. |
| .hidden-print | the content is visible on browser and hidden on print. |
