How to use Bootstrap Grid System?

In this article, we will learn what is Grid System in Bootstrap and how we can use or implement it in our bootstrap page?
Submitted by Bharti Parmar, on August 12, 2018

In the last article, we learned how to create a simple page of Bootstrap? Now, we will learn what is "Grid System" in Bootstrap and how we can use or implement it in our bootstrap page? As you know bootstrap is a mobile-friendly framework. So, we design our responsive page for 'mobile first fluid grid system' and it automatically, adjust its view in every system. Now, we move further and know more about this. If you have any doubt, ask in the comment section.

Now, first we will see what is Grid?

A grid is a 2-D structure where rows and columns are used to structure the content. It is widely used to create a structure and for layout use HTML and CSS which make it easy to use, scan and to reduce the comprehension load on users.

Grid System

In Bootstrap Grid System it scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout. Basically, Grid systems are used for creating page layouts through a series of rows and columns. It’s up to you how many columns individually you want to use in your page and how many columns group you want.

Example:

Working of Grid System

We use .container class (for fixed width) and .container-fluid class (for full width: 100%) to place the rows.
There are .row and col-*-* pre-defined classes are available for layout. It will automatically set the width from the small breakpoint.
Note: Here, Astric ( * ) is for xs (for extra small device phone, <576px) , sm (for small device tablet, >= 768px), md (for desktop, >= 992px) , lg (for larger desktops, >= 1200px) and for the number of columns you want like: col-sm-4.
Use row for a group of columns because .row is a pre-defined wrapper class for col-*-*.
Each .row and .col-*-* has horizontal padding for controlling the space between them called Gutters. That padding is offset in rows for the first and the last column via negative margin on .rows.

Grid Options

Example (Code):

<body>
	<!---------- First type of grid ---------->
	<div class="container">							
		<div class="row">
			<div class="col-sm-4">
				<h3 style="background-color:skyblue;text-align:center;">we use 4 columns in 12 columns.</h3>
			</div>

			<div class="col-sm-4">
				<h3 style="background-color:yellow;text-align:center;">we use 4 columns in 12 columns.</h3>
			</div>

			<div class="col-sm-4">
				<h3 style="background-color:pink;text-align:center;">we use 4 columns in 12 columns.</h3>
			</div>
		</div>
	</div>
	<br /><br />

	<!----------- Second grid type --------------->
	<div class="container">				
		<div class="row">
			<div class="col-sm-6">
				<h3 style="background-color:lightgreen; text-align:center;">we use 6 columns in 12 columns.</h3>
			</div>

			<div class="col-sm-6">
				<h3 style="background-color:lightgrey;text-align:center;">we use 6 columns in 12 columns.</h3>
			</div>
		</div>
	</div>
	<br /><br />

	<!----------- Third grid type --------------->
	<div class="container">						
		<div class="row">
			<div class="col-sm-8">
				<h3 style="background-color:orange;text-align:center;">we use 8 columns in 12 columns.</h3>
			</div>

			<div class="col-sm-4">
				<h3 style="background-color:blue;text-align:center;">we use 4 columns in 12 columns.</h3>
			</div>
		</div>
	</div>
	<br /><br />
		
	<!----------- Fourth grid type --------------->
	<div class="container">			
		<div class="row">
			<div class="col-sm-12">
				<h3 style="background-color:skyblue;text-align:center;">we use all the 12 columns.</h3>
			</div>
		</div>
	</div>
	<br /><br />

</body>

Mobile View

Tablet View

Desktop View

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples