An Overview Of Bootstrap Grid System

Article

gridsystem1.rar

Prerequisites

Bootstrap package
Notepad or Notepad++
Any browser

Bootstrap Grid System

In graphic designing, a Grid is a structure (usually two-dimensional) of intersecting straight lines (horizontal, vertical).
In web design, it is a very effective method to create a consistent layout rapidly and effectively using HTML and CSS.
Bootstrap Grid system allows the developers to use a maximum of 12 columns in a web page. All 12 columns are used individually or grouped to create a wide column. If you want to split the columns as per your wish, still you can't split them in more than 12 columns.

Bootstrap

Grid System is responsive and the columns are re-arranged automatically according to the screen size.

Grid Classes

There are four classes that are used in Bootstrap Grid System.

xs ( mobiles phone viewport)
sm ( tablets viewport)
md( desktops or laptops viewport)
lg( big screen desktops viewport)

You can combine the above classes to create more dynamic and flexible layouts.

Basic structure of a Bootstrap Grid

<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>

Instructions while creating a Bootstrap Grid

Create a row (<div class="row">).
To add the number of columns and the type of class you want (tags with appropriate .col-*-* classes), the 1^st star position is to create what type of class you want. The 2^nd star position is used to create how many columns you want.

Important keywords

Well - Well is used to make the Grid visible
Without well - the normal View of Grid ( grid not visible)
Container- fluid - the Grid fillss the entire screen with the help of this keyword
Container - it shows the Grid with some margin at right and left side.

Coding for extra small devices

<!DOCTYPE html>
<html >
<head>
<title>Bootstrap Grid system</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-9 well">col-9</div>
<div class="col-sm-3 well">col-3</div>
</div>
</div>
<div class="container">
<div class="row">
<strong>With background colour</strong>
<div class="col-sm-9 well" style="background-color:pink">col-9</div>
<div class="col-sm-3 well" style="background-color:cyan">col-9</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output

Coding for medium sized devices

<!DOCTYPE html>
<html >
<head>
<title>Bootstrap grid system</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 well">col-6</div>
<div class="col-md-6 well">col-6</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-9 well">col-6</div>
<div class="col-md-3 well">col-6</div>
</div>
</div>
<div class="container">
<div class="row">
<strong>With background colour</strong>
<div class="col-md-6 well" style="background-color:pink">col-6</div>
<div class="col-md-6 well" style="background-color:cyan">col-6</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output

Coding for large devices

<!DOCTYPE html>
<html >
<head>
<title>Bootstrap grid system</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 well">col-12</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 well">col-12</div>
</div>
</div>
<div class="container">
<div class="row">
<strong>With background colour</strong>
<div class="col-lg-12 well" style="background-color:pink">col-12</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output

Extra small size

It is used for a mobile phone viewport
Screen size below 768px
No maximum container width
Class prefix .col-xs-*
Maximum column width auto

Coding

<!DOCTYPE html>
<html >
<head>
<title>Bootstrap grid system</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output

To create an equal and unequal Grid system, use all the classes.

Coding

<!DOCTYPE html>
<html >
<head>
<title>Bootstrap Grid System</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
<div class="col-xs-1 well">col-1</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-2 well">col-2</div>
<div class="col-sm-2 well">col-2</div>
<div class="col-sm-2 well">col-2</div>
<div class="col-sm-2 well">col-2</div>
<div class="col-sm-2 well">col-2</div>
<div class="col-sm-2 well">col-2</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 well">col-4</div>
<div class="col-md-4 well">col-4</div>
<div class="col-md-4 well">col-4</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-6 well">col-6</div>
<div class="col-xs-6 well">col-6</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-ls-12 well">col-12</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-9 well">col-9</div>
<div class="col-xs-3 well">col-3</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-7 well">col-7</div>
<div class="col-sm-5 well">col-5</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/css" src="js/jquery"></script>
</body>
</html>

Output

Conclusion

I hope, now you understand how to create a Bootstrap Grid system. Stay tuned for more on Bootstrap.

Up Next

Ebook Download

View all

C# Corner Ebook

Frontend Developer Interview

Read by 3 people

Download Now!

Learn

View all

Learn Image