Bootstrap Grid System

Bootstrap Grid System

Bootstrap grid system creates the whole page through the series of 12 columns. And the grids are fully responsive. If you want more block you can group the column as per the requirement.

In another word bootstrap grid system apply the series of the flex container linearly. Maximum you can use 12 columns. One columns have approx 8.33% of width.

Bootstrap 3 grid system
Fig.1 – Bootstrap 3 grid system

Classes Of Grid System

The below lists are the class of grid system.

  • lg class is used for the large size screens(laptop, desktop) whose pixel is 1200px or greater.
  • md class is used for the medium size screens(small lappies) whose pixel is between 992px-1200px
  • sm class is used for the small size screens (Tablets, phones) whose pixel is between 768px-990px
  • xs class is used for the extra small screens (small phones) whose pixel is less than 768px.

Syntax – Bootstrap Grid System

<body>
	<div class="row">
		<div class="col-grid_class-column_">
			
		</div>
		<div class="col-grid_class-column_">
			
		</div>
		<div class="col-grid_class-column_">
			
		</div>
	</div>
</body> 

Example: 1 – Bootstrap Grid System Having a single Column

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Grid System</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   </head>
<body>
	<div class="container">
    	<div class="row">
        	<div class="col-md-12" style="background-color: lightgreen; text-align: justify;">
        		<h2 align="center">Heading 1</h2>
            	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo, sunt in culpa qui officia deserunt mollit anim id est laborum.Tempor dunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            	quis nostrud exercitation ullamco piatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        	</div>
        </div>
    </div>
</body>
</html>

On the above coding here we use the a column of medium size. And below image shows that how a column will be generated.

Here first we create a row through <div class=”row”> inside the container <div class=”container”> than apply the column size through <div class=”col-md-12″> and also apply some inline css. Now define the content inside this <div> and than use this <div> tag for single time for one column.

Here we use <div class=”col-md-12″> because grid system have 12 columns. If you want single column than you have to use full column size 12.

Bootstrap Grid System
Fig.2 – Bootstrap Grid System Of single Column.

Bootstrap Grid System Example of 2 Equal Columns

Example: 2 – Bootstrap Grid System Have 2 equal Columns

<!DOCTYPE html>
<html>`
<head>
    <title>Bootstrap Grid System</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   </head>
<body>
	<div class="container">
    	<div class="row">
        	<div class="col-md-6" style="background-color: lightgreen;">
        		<h2 align="center">Heading 1</h2>
            	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo, sunt in culpa qui officia deserunt mollit anim id est laborum.Tempor dunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            	quis nostrud exercitation ullamco piatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserun[t mollit anim id est laborum.</p>
        	</div>
        	<div class="col-md-6" style="background-color: lightpink;">
        		<h2 align="center">Heading 2</h2>
            	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo, sunt in culpa qui officia deserunt mollit anim id est laborum. Tempor dunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            	quis nostrud exercitation ullamco piatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserun[t mollit anim id est laborum.</p>
        	</div>
    	</div>
    </div>
</body>
</html>

On the above coding here we use the 2 equal columns of medium size.

Here first we create a row through <div class=”row”> inside the container <div class=”container”> than apply the columns size through <div class=”col-md-6″> and also apply some inline css. Now define the content inside this <div> and than use this <div> tag for 2 time for 2 columns.

Here we use <div class=”col-md-6″> because grid system have 12 columns if you want 2 equal column than you have to divide “12” into 2 equal parts i.e. “6”. Thats why we use <div class=”col-md-6″>

Bootstrap 2 Equal Column Grid System Examples
Fig.3 – Bootstrap Grid System Of 2 Columns.

Bootstrap Grid System Example of 2 Unequal Columns

Example: 3 – Bootstrap Grid System Have 2 Unequal Columns

<!DOCTYPE html>
<html>`
<head>
    <title>Bootstrap Grid System</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   </head>
<body>
	<div class="container">
    	<div class="row">
        	<div class="col-md-4" style="background-color: lightgreen;">
        		<h2 align="center">Heading 1</h2>
            	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        	</div>
        	<div class="col-md-8" style="background-color: lightblue;">
        		<h2 align="center">Heading 3</h2>
            	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo, sunt in culpa qui officia deserunt mollit anim id est laborum. Tempor dunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            	quis nostrud exercitation ullamco piatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserun[t mollit anim id est laborum. Sunt in culpa qui officia deserun[t mollit anim id est laborum</p>
        	</div>
    	</div>
    </div>
</body>
</html>

On the above coding here we use the 2 unequal columns of medium size. And below image shows that how the columns will be generated.

Here first we create a row through <div class=”row”> inside the container <div class=”container”> than apply the columns size through <div class=”col-md-4″> and <div class=”col-md-8″>and also apply some inline css. Now define the content inside this <div> and than use this <div> tag for 2 time for 2 columns.

Here we use <div class=”col-md-4″> because first part is smaller than the another part. So here we use the small column size “4” than the another through <div class=”col-md-4″> and another column size is of “8” through <div class=”col-md-8″>

Bootstrap 2 Unequal Column Grid System
figcaption>Fig.4 – Bootstrap Grid System Examples Of 2 Unequal columns.

Note: The partition size of the required column is depend on required columns. But the sum of the all size of column is equal to “12” not more.

Bootstrap Grid System Example of 3 Equal Columns

Example: 4 – Bootstrap Grid System Have 3 Equal Columns

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Grid System</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   </head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4" style="background-color: lightgreen;">
                <h2 align="center">Heading 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="col-md-4" style="background-color: lightblue;">
                <h2 align="center">Heading 2</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="col-md-4" style="background-color: lightpink;">
                <h2 align="center">Heading 3</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
</body>
</html>

On the above coding here we use the 3 equal columns of medium size.

Here we use <div class=”col-md-4″> because here we want 3 equal size part of 12 columns so we used <div class=”col-md-4″> for all three parts.

Bootstrap 3 Equal Column Grid System Examples
Fig.5 – Bootstrap Grid System Of 3 Equal Columns.

Caution: <div class=”col-md-4″> here 4 is the partition of the 12 columns suppose that if you want 4 equal columns than you have to use the <div class=”col-md-3″>

You can leave a response, or trackback from your own site.

One Response to “Bootstrap Grid System”

  1. Elsy Valer says:

    Have you ever considered about including a little bit more than just your articles? I mean, what you say is important and all. But just imagine if you added some great images or video clips to give your posts more, “pop”! Your content is excellent but with pics and video clips, this website could certainly be one of the best in its field. Superb blog!

Leave a Reply to the article

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!          Protected by Copyscape