Introduction to Bootstrap 3 Grid System

Anoop Kumar Sharma
10y
10.7k
0
1

Article

Bootstrap provides a Mobile first fluid and responsive Grid System that appropriately scales up to 12 columns as the device or view-port size increases. Using the Bootstrap Grid System, we can create a responsive web layout very quickly.

Bootstrap provides predefined grid classes for making layouts for various types of devices, like phones (<768px), tablets (≥768px), medium sized desktops (≥992px) and large devices (≥200px).

Example: Creating two columns (of equal width) for medium Sized desktop screen

1) First add the .container class to the div that sets the maximum width and centring of the layout.

2) After adding a container class, add another div with .row class. As we know that a row in the grid is made up of 12 columns and we will create two columns having the same width we need to use a .col-md-6 class in both divs (Sum of Columns 6+6=12). If we use a .col-md-6 class in one div and a .col-md-7 in another div then the second div wrap up and come in the next row (because here the number of columns in a row becomes more than 12, in other words 6+7).

<!DOCTYPE html>
<html>
<head>
<title>Grid Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="Stylesheet">
<style>
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor eleifend nibh at tristique. In sit amet nibh non dolor tempor tincidunt. Mauris aliquet, lacus in lobortis pulvinar, ligula augue venenatis mi, vel adipiscing orci libero ut nisi. Suspendisse lobortis faucibus enim, a ullamcorper nibh. Aliquam ut diam posuere, ornare augue eget, dignissim massa. Nullam consectetur fermentum enim sit amet hendrerit. Phasellus commodo ornare aliquam. Vestibulum odio enim, pretium in velit semper, faucibus egestas nunc.</p></div>
<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor eleifend nibh at tristique. In sit amet nibh non dolor tempor tincidunt. Mauris aliquet, lacus in lobortis pulvinar, ligula augue venenatis mi, vel adipiscing orci libero ut nisi. Suspendisse lobortis faucibus enim, a ullamcorper nibh. Aliquam ut diam posuere, ornare augue eget, dignissim massa. Nullam consectetur fermentum enim sit amet hendrerit. Phasellus commodo ornare aliquam. Vestibulum odio enim, pretium in velit semper, faucibus egestas nunc.</p></div>
</div>
</div>
<script js="js/bootstrap.min.js"></script>
</body>
</html>

Preview

Example: Multiple Grid System

In a multiple grid system, we use two or more predefined grid classes for a single div. For easy understanding, we will create an example in which we have 3 content boxes (3 div) of the same size (33%/33%/33%) for medium sized devices and when we reduce the size or access it with a tablet (small sized device) then our layout changes to 2 divs of equal width (in other words 50%) and one with 100% width below the first two divs.

In this example, we use 3 divs with a multiple grid system. Here, we set the .col-md-4 class for all the 3 divs that makes it visible side by side and of the same width for the medium sized desktop (≥992px) and for small screen devices like a tablet we use a .col-sm-6 class for the first 2 divs so that on small devices the first two divs come along side by side and .col-sm-12 for the third div that makes it take the entire width of the container.

<!DOCTYPE html>
<html>
<head>
<title>Multiple Grid Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="Stylesheet">
<style>
</style>
</head>
<body>
<div class="container">
<div class="row">
<h3>Example of Multiple grid System</h3>
<div class="col-sm-6 col-md-4">Some Text here.Some Text here.Some Text here.Some Text here.Some Text here.Some Text here.Some Text here.</div>
<div class="col-sm-6 col-md-4">Some Text here.Some Text here.Some Text here.Some Text here.Some Text here.Some Text here.Some Text here.</div>
<div class="col-sm-12 col-md-4">Some Text here.Some Text here.Some Text here.Some Text here.Some Text here.Some Text here.Some Text here.</div>
</div>
</div>
<script js="js/bootstrap.min.js"></script>
</body>
</html>

The following is a preview of a medium device desktop:

The following is a preview of viewing on a small devices tablet:

Example: Nested Column

For adding a nested column, add another .row class to the div that you want to do the partition and then divide the column using .col-md-* as needed.

<!DOCTYPE html>
<html>
<head>
<title>Grid Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="Stylesheet">
<style>
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor eleifend nibh at tristique. In sit amet nibh non dolor tempor tincidunt. Mauris aliquet, lacus in lobortis pulvinar, ligula augue venenatis mi, vel adipiscing orci libero ut nisi. Suspendisse lobortis faucibus enim, a ullamcorper nibh. Aliquam ut diam posuere, ornare augue eget, dignissim massa. Nullam consectetur fermentum enim sit amet hendrerit. Phasellus commodo ornare aliquam. Vestibulum odio enim, pretium in velit semper, faucibus egestas nunc.</p>
<div class="row">
<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor eleifend nibh at tristique. In sit amet nibh non dolor tempor tincidunt. Mauris aliquet, lacus in lobortis pulvinar, ligula augue venenatis mi, vel adipiscing orci libero ut nisi. Suspendisse lobortis faucibus enim, a ullamcorper nibh.</div>
<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor eleifend nibh at tristique. In sit amet nibh non dolor tempor tincidunt. Mauris aliquet, lacus in lobortis pulvinar, ligula augue venenatis mi, vel adipiscing orci libero ut nisi. Suspendisse lobortis faucibus enim, a ullamcorper nibh.</div>
</div>
</div>
<div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor eleifend nibh at tristique. In sit amet nibh non dolor tempor tincidunt. Mauris aliquet, lacus in lobortis pulvinar, ligula augue venenatis mi, vel adipiscing orci libero ut nisi. Suspendisse lobortis faucibus enim, a ullamcorper nibh.</div>
</div>
</div>
<script js="js/bootstrap.min.js"></script>
</body>
</html>

Preview

Offset

Offset is required for moving columns towards the right side using .col-md-offset-* classes; here the value of * is between 1 and 11.

<!DOCTYPE html>
<html>
<head>
<title>Grid Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="Stylesheet">
<style>
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3"><p style="background-color:silver;padding:20px;">.col-md-3</p></div>
<div class="col-md-3"><p style="background-color:silver;padding:20px;">.col-md-3</p></div>
<div class="col-md-3"><p style="background-color:silver;padding:20px;">.col-md-3</p></div>
<div class="col-md-3"><p style="background-color:silver;padding:20px;">.col-md-3</p></div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3"><p style="background-color:silver;padding:20px;">.col-md-3 .col-md-offset-3</p></div>
</div>
<div class="row">
<div class="col-md-5"><p style="background-color:silver;padding:20px;">.col-md-5</p></div>
<div class="col-md-3 col-md-offset-2"><p style="background-color:silver;padding:20px;">.col-md-3 .col-md-offset-2</p></div>
</div>
</div>
<script js="js/bootstrap.min.js"></script>
</body>
</html>

Preview

Up Next

Ebook Download

View all

A Guide to Mastering HTML5 CSS3 and JavaScript

Read by 3 people

Download Now!

Learn

View all