Bootstrap For Beginners - Part Three (Bootstrap Grids)

Shaili Dashora
7y
10k
0
1

Article

Introduction

In this article we will learn about Bootstrap's Grid System, Grid Classes, and different Bootstrap Grid Layouts by creating interesting examples. So by using this we can easily create interactive, responsive website layouts.

Bootstrap Grid System

Bootstrap grid system provides the easy way to create responsive website layouts. Bootstrap 3 introduces the responsive mobile first fluid grid system which means that the code for Bootstrap now starts with smaller screens like mobile and tablets, and then expands components and grids for larger screens like laptops and desktops. It scales up to 12 columns as the device or viewport size increases. Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

Grid Classes

Bootstrap 3 provides predefined grid classes and by using this we can quickly make grid layouts for different types of devices.

The Bootstrap grid system has four classes. These classes can be combined to create more layouts.

The following table shows grid classes and some of the features of the new grid system in Bootstrap-3.

Basic Structure of a Bootstrap Grid

Now for creating rows and columns using 12 column responsive grid system.

First we need to create a container that acts as a wrapper for our rows and columns by using the .container class
Then we have to create rows inside the container by using (<div class="row">) ,
Then we need to add the desired number of columns inside any row by using classes .col-xs-*, .col-sm-*, .col-md-* and .col-lg-* the number of columns should always add up to 12 for each row. In these columns we write our contents.

The following is a Basic Structure

<div class="container">
<div class="row">
<div class="col-*-*">col1</div>
<div class="col-*-*">col2</div>
<div class="col-*-*">col3</div>
</div>
<div class="row">
...
</div>
</div>

Now we will create some examples for Grid Layouts by which we can easily make responsive website layouts.

Example 1: Two Column Layouts

In this example we will create two column layouts for different devices. In mobile the column will automatically arrange horizontally

according to screen size. We know that grid system works on 12 columns, so for creating two column layouts we keep the sum of the grid

column numbers equal to 12 in each row so columns will be in one line. In this example we will add three rows and inside each

row we will add two columns. Let's create the example.

Step 1: First we will create a Bootstrap Template, HTML page name as "TwoColLayout.html" by usin the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part3</title>
<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">
<h1>Two Column Layouts</h1>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Step 2:

Now we will add rows and columns for creating Two Column Layouts by the following code; in this we will give style "background-color" for each column so output shows clearly.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part3</title>
<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">
<h1>Two Column Layouts</h1>
<div class="row">
<div class="col-sm-4" style="background-color:#8dc1aa">column1: col-sm-4</div>
<div class="col-sm-8" style="background-color:#808080">column2: col-sm-8</div>
</div>
<div class="row">
<div class="col-sm-6" style="background-color:#cfa6e2">column3: col-sm-6</div>
<div class="col-sm-6" style="background-color:#faa76c">column4: col-sm-6</div>
</div>
<div class="row">
<div class="col-sm-3" style="background-color:#c8fcfc">column5: col-sm-3</div>
<div class="col-sm-9" style="background-color: #79ad96">column6: col-sm-9</div>
</div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output: See output for different devices according to screen size.

Example 2: Three Column Layouts

In this example we will create Three column layouts for different devices like laptops and desktops screens. In this example we will add rows and inside each row we will add three columns. Let's create the example. First we will create a Bootstrap Template, HTML page name as "ThreeColLayout.html". Then we will add rows and columns for creating Three Column Layouts by the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part3</title>
<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">
<h1>Three Column Layouts</h1>
<div class="row">
<div class="col-md-4" style="background-color:#8dc1aa">column1: col-md-4</div>
<div class="col-md-4" style="background-color:#808080">column2: col-md-4</div>
<div class="col-md-4" style="background-color:#8dc1aa">column3: col-md-4</div>
</div>
<div class="row">
<div class="col-md-2" style="background-color:#cfa6e2">column4: col-md-2</div>
<div class="col-md-8" style="background-color:#faa76c">column5: col-md-8</div>
<div class="col-md-2" style="background-color:#cfa6e2">column6: col-md-2</div>
</div>
<div class="row">
<div class="col-md-3" style="background-color:#d2ee8b">column7: col-md-3</div>
<div class="col-md-6" style="background-color:#8dc1aa">column8: col-md-6</div>
<div class="col-md-3" style="background-color:#d2ee8b">column9: col-md-3</div>
</div>
<div class="row">
<div class="col-md-3" style="background-color:#808080">column10: col-md-3</div>
<div class="col-md-7" style="background-color:#faa76c">column11: col-md-7</div>
<div class="col-md-2" style="background-color:#808080">column12: col-md-2</div>
</div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output: See output for laptops and desktops screens and in mobile it will become horizontal as usual according to the screen size.

Example 3: Creating Multi-Column Layouts

In this example we will create Multi-Column Layouts. In first row we will add 12 columns with column number 1(12x1=12), then in second row we will add 6 columns with column number 2(6x2=12),then in third row we will add 4 columns with column number 3(4x3=12),then in forth row we will add 3 columns with column number 4(3x4=12),then in fifth row we will add 2 columns with column number 6(2x6=12).Lets create example and see output by writing following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part3</title>
<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">
<h1>Multi Column Layouts</h1>
<div class="row">
<div class="col-md-1" style="background-color:#8dc1aa">col-md-1</div>
<div class="col-md-1" style="background-color:#808080">col-md-1</div>
<div class="col-md-1" style="background-color:#8dc1aa">col-md-1</div>
<div class="col-md-1" style="background-color:#808080">col-md-1</div>
<div class="col-md-1" style="background-color:#8dc1aa">col-md-1</div>
<div class="col-md-1" style="background-color:#808080">col-md-1</div>
<div class="col-md-1" style="background-color:#8dc1aa">col-md-1</div>
<div class="col-md-1" style="background-color:#808080">col-md-1</div>
<div class="col-md-1" style="background-color:#8dc1aa">col-md-1</div>
<div class="col-md-1" style="background-color:#808080">col-md-1</div>
<div class="col-md-1" style="background-color:#8dc1aa">col-md-1</div>
<div class="col-md-1" style="background-color:#808080">col-md-1</div>
</div>
<br />
<div class="row">
<div class="col-md-2" style="background-color:#cfa6e2">col-md-2</div>
<div class="col-md-2" style="background-color:#faa76c">col-md-2</div>
<div class="col-md-2" style="background-color:#cfa6e2">col-md-2</div>
<div class="col-md-2" style="background-color:#faa76c">col-md-2</div>
<div class="col-md-2" style="background-color:#cfa6e2">col-md-2</div>
<div class="col-md-2" style="background-color:#faa76c">col-md-2</div>
</div>
<br />
<div class="row">
<div class="col-md-3" style="background-color:#d2ee8b">col-md-3</div>
<div class="col-md-3" style="background-color:#8dc1aa">col-md-3</div>
<div class="col-md-3" style="background-color:#d2ee8b">col-md-3</div>
<div class="col-md-3" style="background-color:#8dc1aa">col-md-3</div>
</div>
<br />
<div class="row">
<div class="col-md-4" style="background-color:#faa76c">col-md-4</div>
<div class="col-md-4" style="background-color:#cfa6e2">col-md-4</div>
<div class="col-md-4" style="background-color:#faa76c">col-md-4</div>
</div>
<br />
<div class="row">
<div class="col-md-6" style="background-color:#808080">col-md-6</div>
<div class="col-md-6" style="background-color:#8dc1aa">col-md-6</div>
</div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output

Example 4: Offsetting the Grid Columns

In this example we will learn about Offsetting the Grid Columns. We can move grid columns to the right by using the column Offset classes like .col-sm-offset-*,.col-md-offset-* we can set alignment. These classes are used for offsetting the column and it will increase its left margin by a specified number of columns. In this example the class .col-sm-offset-3 on the column .col-sm-9 moves it to the right as specified offset three columns from original position by writing following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part3</title>
<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">
<h1>Offsetting the Grid Columns</h1>
<div class="row">
<div class="col-sm-3" style="background-color:#8dc1aa">column1: col-sm-3</div>
<div class="col-sm-9" style="background-color:#808080">column2: col-sm-9</div>
</div>
<div class="row">
<div class="col-sm-9 col-sm-offset-3" style="background-color:#cfa6e2">column3: col-sm-9 with 3 column Offset</div>
</div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output

In this article we focused on Bootstrap Grid system. Then in the next articles we will understand all the components of Bootstrap step by step.