Bootstrap Grid System
Grid system represents data in rows and columns.
As per written in bootstrap official documentation- “Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.” This means that bootstrap starts by targeting smaller screen (mobile, tablets) and then expands components and grids to large screen (desktop, laptops).
Let’s see how bootstrap grid system works: Firstly, all rows must be placed within container class. It will apply proper alignment and padding to cells. All columns must be placed within row class. For columns, mainly four classes available for responsiveness of design; like- col-xs-* (for extra small), col-sm-* (for small), col-md-* (for medium), col-lg-* (for large). Where * indicates a number within 1 to 12. All columns are created by specifying the number of 12 available columns to be spanned. As an example, 4 equal columns would use four .col-sm-3 class (4*3=12).
| .col-xs-* | Extra small devices (<768px) (e.g. mobile phones) |
| .col-sm-* | Small devices (≥768px) (e.g. tablets) |
| .col-md-* | Medium devices (≥992px) (e.g. desktops) |
| .col-lg-* | Large devices (≥1200px) (e.g. big screen desktops) |
Note: By default these classes apply padding of 15px at each side of column.
Find Basic structure shown as below of Bootstrap Grid System:
<div class = "container">
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">...</div>
</div>
<div class = "container">....</div>
Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div>
<hr />
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-8" style="background-color: #c6edb6; border: 1px solid green;">
<p>Small: 3; Medium: 6; Large: 8</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-4" style="background-color: #c6edb6; border: 1px solid green;">
<p>Small: 9; Medium: 6; Large: 4</p>
</div>
</div>
</div>
<hr />
</div>
</body>
</html>
Here, we can see that every row is made up of 12 units. Columns are divided in a way that sums 12 together. When screen is small, class applied to one row cell is of 3 and to another row cell is of 9. 3+9 will be 12; means first cell will occupy 30% and another cell will have 70% of total width. Same as this, for medium screen, 6+6 will be 12; so 50% of total width is occupy by both cells. And for large screen, first cell will have 60% and second cell will have 40% of total (8+4).
OUTPUT:
Download source code for bootstrap Grid system
Offset Columns:
Using the .col-*-offset-# class we can apply offset on the display. Where * indicates lg, md, sm, xs and # denotes number of columns which range from 1 to 11. These classes will increase the left margin by # columns.
Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div>
<hr />
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-offset-3" style="background-color: #c6edb6; border: 1px solid green;">
<p>offest of 3 is applied in medium screen</p>
</div>
</div>
</div>
<hr />
</div>
</body>
</html>
OUTPUT:
Column Order:
We can change ordering of grid columns using .col-*-push-# and .col-*-pull-# classes. Where * indicates lg, md, sm, xs and # denotes number of columns which range from 1 to 11.
Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div>
<hr />
<div class="container">
<div class="row">
<p>Before Ordering</p>
<div class="col-md-4" style="background-color: #68b5ed; border: 1px solid green;">
LEFT
</div>
<div class="col-md-8" style="background-color: #c6edb6; border: 1px solid green;">
RIGHT
</div>
</div>
<br>
<div class="row">
<p>After Ordering</p>
<div class="col-md-4 col-md-push-8" style="background-color: #68b5ed; border: 1px solid green;">
LEFT
</div>
<div class="col-md-8 col-md-pull-4" style="background-color: #c6edb6; border: 1px solid green;">
RIGHT
</div>
</div>
</div>
<hr />
</div>
</body>
</html>
OUTPUT:
