Tutorials Tonight's 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

<div class="container">
  <div class="row">
    <div class="col-md-4">Column 1 of three</div>
    <div class="col-md-4">Column 2 of three</div>
    <div class="col-md-4">Column 3 of three</div>
  </div>
</div>
▶ 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:


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.

<div class="container">
  <!-- defining 2 equal width column -->
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
  </div>
  <!-- defining 2 equal width column for device -->
  <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>

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.



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.

<div class="container-fluid">
  <div class="row">
    <div class="col">Column 1 (.col)</div>
    <div class="col">Column 2 (.col)</div>
    <div class="col">Column 3 (.col)</div>
    <div class="col">Column 4 (.col)</div>
    <div class="col">Column 5 (.col)</div>
  </div>
</div>
▶ Run the code
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:


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.
<div class="container-fluid">
  <div class="row">
    <div class="col-sm">Column 1 (.col-sm)</div>
    <div class="col-sm">Column 2 (.col-sm)</div>
    <div class="col-sm">Column 3 (.col-sm)</div>
  </div>
  <div class="row">
    <div class="col-md">column 1 (.col-md)</div>
    <div class="col-md">column 2 (.col-md)</div>
    <div class="col-md">column 3 (.col-md)</div>
    <div class="col-md">column 4 (.col-md)</div>
  </div>
  <div class="row">
    <div class="col-lg">column 1 (.col-lg)</div>
    <div class="col-lg">column 2 (.col-lg)</div>
    <div class="col-lg">column 3 (.col-lg)</div>
    <div class="col-lg">column 4 (.col-lg)</div>
    <div class="col-lg">column 5 (.col-lg)</div>
  </div>
  <div class="row">
    <div class="col-xl">column 1 (.col-xl)</div>
    <div class="col-xl">column 2 (.col-xl)</div>
    <div class="col-xl">column 3 (.col-xl)</div>
    <div class="col-xl">column 4 (.col-xl)</div>
    <div class="col-xl">column 5 (.col-xl)</div>
    <div class="col-xl">column 6 (.col-xl)</div>
  </div>
</div>
▶ Run the code

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.

<div class="container-fluid">
  <!-- Two equal sized grid 6 + 6 = 12 -->
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
  <!-- Three equal sized grid 4 + 4 + 4 = 12 -->
  <div class="row">
    <div class="col-md-4">Column 1</div>
    <div class="col-md-4">Column 2</div>
    <div class="col-md-4">Column 3</div>
  </div>
  <!-- Four equal sized grid 3 + 3 + 3 + 3 = 12 -->
  <div class="row">
    <div class="col-md-3">Column 1</div>
    <div class="col-md-3">Column 2</div>
    <div class="col-md-3">Column 3</div>
    <div class="col-md-3">Column 4</div>
  </div>
</div>
▶ Run the code

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 .

<div class="container-fluid">
  <!-- Two grid of size 10 and 2 -->
  <div class="row">
    <div class="col-md-10">Span 10</div>
    <div class="col-md-2">Span 2</div>
  </div>
  <!-- Three grid of size 3,6 and 3 -->
  <div class="row">
    <div class="col-md-3">Span 3</div>
    <div class="col-md-6">Span 6</div>
    <div class="col-md-3">Span 3</div>
  </div>
  <!-- Four grid of size 2,6,1 and 3 -->
  <div class="row">
    <div class="col-md-2">Span 2</div>
    <div class="col-md-6">Span 6</div>
    <div class="col-md-1">Span 1</div>
    <div class="col-md-3">Span 3</div>
  </div>
</div>
▶ Run the code

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

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.