tutorialstonight logo
A Platform To Learn To Code

BOOTSTRAP 4 GRID SYSTEM



What Is Bootstrap Grid System?

A grid in bootstrap is a 2-dimensional structure which is made up of a series of line arranged in a horizontal and vertical manner.

The Grid system is one of the most important concepts of Bootstrap. Grids in bootstrap are used to arrange components of the webpage in row and column.

The Bootstrap grid consists of 12 columns. These 12 columns can be grouped together in any combination but the sum of all grids in a row should not exceed more than 12.

Look at the following image to understand grid flow in a row.

You can keep your HTML elements in these grids and elements will be arranged in some fashion on the webpage as shown in the above image. The Bootstrap grids are responsive it will adjust elements contents to best fit in the device.

Bootstrap defines a grid width of (span / 12) * 100% on the webpage, for the device which grid is defined for (Note: In smaller device due to responsiveness grid may cover 100% width or more than calculated). Example: an element with span 12 cover 100% width. element with span 6 covers 50% width on the device for which it is defined and so on.


How Doed It works?

For the grid system to work, Bootstrap uses a series of containers, rows and columns to layout structures and align the contents.

Bootstrap is built with CSS flexbox and is fully responsive.

Bootstrap provides classes for 4 different device sizes. Using these classes grids are defined in bootstrap.

Bootstrap grid class lookes like as follow: .col--. Example: .col-sm-1, .col-md-1, .col-lg-1, .col-xl-1, etc

Bootstrap Grid Options

Feature Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra Large
≥1200px
Max container width None
(auto)
540px 720px 960px 1140px
Class prefix .col-* , .col
(replace * by device:sm,lg)
.col-sm-*
(replace * by grid size)
.col-md-* .col-lg-* .col-xl-*
Device Small screens Mobile Tablet Laptop Desktop or laptop
Nestable Yes
Column ordering Yes

Using the above information lets have a look at the basic structure of the Bootstrap grid.

Basic structure of Bootstrap grid


To create grid you must wrap up your grid element in <div class="row">...</div>. Then add desired device name in the place of the first star (*): sm, md,lg, xl. The second star (*) represents grid size put your grid size from 1-12.

The grid size in each row should be equal to 12. If it exceeds 12 then elements will overflow to next row.


Creating Grids Using Bootstrap Classes

Using Bootstrap classes lets build grids of different size with different combinations of grids.

In the below example we are using .col class which gives equal width to all the grids inside a row.

Column 1 (.col)
Column 2 (.col)
Column 3 (.col)

The above example creates three equal-width columns on all kind of devices small, medium, large and extra large using predefine grid class .col.

Code Explanation:

  • The .container-fluid class is used to create a container to hold, centre and horizontally pad your websites content. You can alternatively use .container class but it creates some padding from both left and right side.
  • Rows are a wrapper of columns. Each column is aligned within a row, same like cinema hall chairs. To create row wrap up your column elements with parent div having .row class.
  • To create equal width column for all kind of devices use .col class.


Other Classes Which Create Equal Width Grid

There are 4 more classes to create equal width grid but these classes have their special breakpoints, below that break point grids will no longer stay in a row but get arranged in a column covering 100% width.

The 4 other classes are :

  1. .col-sm : Creates equal width column but with device having screen size 576px or lower, it covers 100% width.
  2. .col-md : Creates equal width column but with device having screen size 768px or lower, it covers 100% width.
  3. .col-lg : Creates equal width column but with device having screen size 992px or lower, it covers 100% width.
  4. .col-xl : Creates equal width column but with device having screen size 1200px or lower, it covers 100% width.


Responsive Columns

The other Bootstrap classes like .col-sm-*, .col-md-*, .col-lg-* and .col-xl-* create grid of specified size which is reponsive and grid size adjust itself to best fit in any device.

The total number of columns in a grid is 12. Using these classes you can create any combination of grids but in a row number of the column should be equal to 12. Example: .col-sm-4, .col-sm-4 and .col-sm-4 create 3 columns of size 4, sum 4+4+4 = 12.

Creating Equal Width Responsive Grids

The following example will show you how to create responsive equal width grids. The grids will be aligned horizontally in laptop, computers and tablets but in mobile, it will automatically become horizontal and cover the full screen. This is what responsiveness is about to best fit in different devices.

Output

Note: Result can be seen better in big device like laptop.

Column 1
Column 2
Column 1
Column 2
Column 3
Column 1
Column 2
Column 3
Column 4

Creating Unequal Width Responsive Grids

The following example will show you how to create responsive unequal width grids. The grids will be aligned horizontally in laptop, computers and tablets but in mobile, it will automatically become horizontal and cover the full screen. This is what responsiveness is about to best fit in different devices.

All grids sum up to 12 in a row. From below example: 10+2=12, 3+6+3=12 and 2+6+1+3=12 .

Output

Note: Result can be seen better in big device like laptop.

Span 10
Span 2
Span 3
Span 6
Span 3
Span 2
Span 6
Span 1
Span 3
Bootstrap 4 Typography