In Progress
Lesson 7 of 39
In Progress

Grid System

A grid system allows us to properly layout our website’s content.

It divides the screen into multiple rows and columns that can be used to create various types of layouts.

Once we have the rows and columns defined, we can place HTML element inside.

Bootstrap’s grid system divides the screen into columns-up to 12 in each row.

The column widths vary according to the size of screen. Hence, Bootstrap’s grid system is responsive, as the columns resize themselves dynamically when the size of browser window changes.

You can create an infinite number of rows. The intersection of these rows and columns forms a rectangular grid to contain the website’s content.

Column Classes

Bootstrap 3 has the responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Bootstrap 3 has predefined grid classes for quickly making grid layouts for different types of devices like cell phones, tablets, desktops, etc.

We can use the .col-xs- class to create grid columns for extra small devices like cell phone. Use the .col-sm- for small screen devices like tablets. Use the .col-md- class for medium size devices like desktop and the .col-lg- for large desktop screens.

The following table summarizes some of the key features of new grid system.

Features
Bootstrap 3 Grid System
Extra small devices
Phones (<768px)
Small devices
Tablets (>=768px)
Medium devices
Desktops (>=992px)
Large devices
Desktops (>=1200px)
Max container widthNone (auto)750px970px1170px
Class prefix.col-xs-.col-sm-.col-md-.col-lg-
Max column widthAuto~62px~81px~97px
Gutter width15px on each side of a column (i.e. 30px)

Code to show the use of col-md- classes

<html>
<head>
<title>Bootstrap Grid Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<style type="text/css">
		p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #E6E6FA;
    }
</style>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-4"><p>Box 1</p></div>
    <div class="col-md-4"><p>Box 2</p></div>
    <div class="col-md-4"><p>Box 3</p></div>
    <div class="col-md-4"><p>Box 4</p></div>
    <div class="col-md-4"><p>Box 5</p></div>
    <div class="col-md-4"><p>Box 6</p></div>
    <div class="col-md-4"><p>Box 7</p></div>
    <div class="col-md-4"><p>Box 8</p></div>
    <div class="col-md-4"><p>Box 9</p></div>
    <div class="col-md-4"><p>Box 10</p></div>
    <div class="col-md-4"><p>Box 11</p></div>
    <div class="col-md-4"><p>Box 12</p></div>
  </div>
</div>
</body>
</html>

Output:

KodNest bt7

You need to add appropriate css file to get the result you are looking for.

Customize For Various Size Devide

Customize layout for tablet to render content as 2×6 grids (i.e. 2 columns and 6 rows), add the class .col-sm-6 on every column.


<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #f2f2f2;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6"><p>Box 1</p></div>
            <div class="col-sm-6"><p>Box 2</p></div>
            <div class="col-sm-6"><p>Box 3</p></div>
            <div class="col-sm-6"><p>Box 4</p></div>
            <div class="col-sm-6"><p>Box 5</p></div>
            <div class="col-sm-6"><p>Box 6</p></div>
            <div class="col-sm-6"><p>Box 7</p></div>
            <div class="col-sm-6"><p>Box 8</p></div>
            <div class="col-sm-6"><p>Box 9</p></div>
            <div class="col-sm-6"><p>Box 10</p></div>
            <div class="col-sm-6"><p>Box 11</p></div>
            <div class="col-sm-6"><p>Box 12</p></div>
        </div>
    </div>
</body>
</html>

Output:

KodNest bt8

Customizing the layout for large desktop screen

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #f2f2f2;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3"><p>Box 1</p></div>
            <div class="col-lg-3"><p>Box 2</p></div>
            <div class="col-lg-3"><p>Box 3</p></div>
            <div class="col-lg-3"><p>Box 4</p></div>
            <div class="col-lg-3"><p>Box 5</p></div>
            <div class="col-lg-3"><p>Box 6</p></div>
            <div class="col-lg-3"><p>Box 7</p></div>
            <div class="col-lg-3"><p>Box 8</p></div>
            <div class="col-lg-3"><p>Box 9</p></div>
            <div class="col-lg-3"><p>Box 10</p></div>
            <div class="col-lg-3"><p>Box 11</p></div>
            <div class="col-lg-3"><p>Box 12</p></div>
        </div>
    </div>
</body>
</html>

Output:

KodNest bt9
KodNest Training New Batch is starting on 19th October 2020. Attend one week free demo classes.Register Now

New Report

Close