tutorialstonight logo

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. It uses a series of containers, rows and columns to layout and align the content.

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.

Bootstrap grid system

Bootstrap grid system example

You can keep your HTML elements or contents in these grids and elements and that will be arranged in the similar fashion on the webpage as shown in the above image.

The Bootstrap grids are responsive it adjust elements contents to best fit in the device.

The bootstrap 4 consists of predefined grid classes to create layouts for different types of devices quickly, like cell phones, laptop, tablets, desktop, etc.


How Does 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-4, .col-md-4, .col-lg-4, .col-xl-4, etc

bootstrap grid example

▶ Run the code
Column 1 of three
Column 2 of three
Column 3 of three

The above example creates 3 equal width columns on medium, large and extra large devices.

For smaller device size columns automatically flow to new line.

Let's break down the above code:

  • The .container class wrap the row elements and pad the site's content.
  • The .row wrap the column elements. Each column has horizontal padding (called a gutter) for controlling the space between the columns.
  • The horizontal padding in columns are counteracted by negative margin on rows, this makes contents in columns visually aligned down the left side.
  • The content must be placed within the columns and only columns may be immediate children of rows.

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 :sm,md,lg)
.col-sm-*
(replace * by grid size)
.col-md-* .col-lg-* .col-xl-*
Device Small screens Mobile Tablet Laptop Desktop or laptop
Number of columns 12
Gutter width 30px (15px left and 15px right)
Nestable Yes
Column ordering Yes

Using the above information let's have a look at the basic structure of the Bootstrap grid.

Basic structure of grid

To create grid system first create a container with .container or .container-fluid class.

Then wrap .row elements within the container and create columns inside the rows using column classes like .col, .col-* or .col-*-*.

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


h3

Equal width column

To create equal width column use .col class. The .col class create colums that has equal width.

The .col class is used when you need jsut need equal width column regardless of device size.

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

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

Note: In smaller divices it may flow to new line because content could no longer fit in the same line.

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