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.
Twitter 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 width | None (auto) | 750px |
970px |
1170px |
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Max column width | Auto |
~62px |
~81px |
~97px |
| Gutter width | 15px on each side of a column (i.e. 30px) |
|||
The following code shows how to use the col-md- classes.
<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>
<!-- w ww . ja va2s . c om-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Twitter Bootstrap 3 Grid System</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">
<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-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>
The following code shows how to use .clearfix class and the responsive utility classes.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Twitter Bootstrap 3 Grid System</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">
<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{<!-- w ww. j a va 2 s. c o m-->
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-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="clearfix visible-md-block"></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="clearfix visible-md-block"></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="clearfix visible-md-block"></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>The default grid system has 12 columns, we cleared columns after every third occurrence.
.visible-md-block makes the .clearfix class
effective only on medium size devices and it is hidden on other devices.
Customize layout for tablet to render content as 2x6 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{<!-- w w w . ja v a2 s . co m-->
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 col-md-4"><p>Box 1</p></div>
<div class="col-sm-6 col-md-4"><p>Box 2</p></div>
<div class="col-sm-6 col-md-4"><p>Box 3</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 4</p></div>
<div class="col-sm-6 col-md-4"><p>Box 5</p></div>
<div class="col-sm-6 col-md-4"><p>Box 6</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 7</p></div>
<div class="col-sm-6 col-md-4"><p>Box 8</p></div>
<div class="col-sm-6 col-md-4"><p>Box 9</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 10</p></div>
<div class="col-sm-6 col-md-4"><p>Box 11</p></div>
<div class="col-sm-6 col-md-4"><p>Box 12</p></div>
</div>
</div>
</body>
</html>Add clearing floats for small devices our final code would be:
<!-- w w w . jav a 2 s . c o m-->
<!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 col-md-4"><p>Box 1</p></div>
<div class="col-sm-6 col-md-4"><p>Box 2</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 3</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 4</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 5</p></div>
<div class="col-sm-6 col-md-4"><p>Box 6</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 7</p></div>
<div class="col-sm-6 col-md-4"><p>Box 8</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 9</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 10</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 11</p></div>
<div class="col-sm-6 col-md-4"><p>Box 12</p></div>
</div>
</div>
</body>
</html>Customize the layout for larger device like 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{<!-- ww w . j av a 2s. c o m-->
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 col-md-4 col-lg-3"><p>Box 1</p></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 2</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 3</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 4</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 5</p></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 6</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 7</p></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 8</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 9</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 10</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 11</p></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 12</p></div>
</div>
</div>
</body>
</html>
Bootstrap recommends that we should place all the rows and
columns inside a container to ensure proper alignment and padding.
There are two types of container classes in Bootstrap: container
and container-fluid.
The former creates a fixed-width container in the browser window, while the latter creates a full-width fluid container.
The fixed-width container is styled to appear at the center of the screen, omitting extra space on both sides. Hence, it is a good practice to wrap all the contents within a container.
We will use the fixed-width container in our demo.
<div class="container"></div>
Next, we'll create a row inside a container. Once the row is defined, we can start creating the columns. Bootstrap has a class row for creating rows:
<div class="container"> <div class="row"> </div> </div>
You can create an infinite number of rows but they must be placed within a container. For better results, it is recommended to have a single container with all the rows inside it.
In Bootstrap, columns are created by specifying how many of the 12 available Bootstrap columns you wish to span.
Suppose we want to have only a single column. It should span across all twelve available
Bootstrap columns. For this we'll use the class col-xs-12,
with the number 12 specifying the amount of columns to span.
To create two equal-width columns in a row, we'd use the class
col-xs-6 for each one. This tells Bootstrap that
we want two columns that span across six of Bootstrap's columns, as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!--from w ww .java 2 s .com-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">
<h4>Column 1</h4>
</div>
<div class="col-xs-6">
<h4>Column 2</h4>
</div>
</div>
</div>
</body>
</html>