Tutorial On How to Create Bootstrap 3 Responsive Grid System

Bootstrap 3 grid system is the container or container fluid and row and column system, to make a mobile responsive website using bootstrap the grid system is the first need to make the structure and in this tutorial we will learn how to make the structure of a website using bootstrap grid system.

Bootstrap 3 Grid System

Bootstrap 3 Grid System

Bootstrap grid system is

the column will be inside row and the row will be inside container or container fluid, so inside one container or container fluid there shall be multiple row and inside roe there shall be multiople column upto 12 count column grid

*note there will not be a container or container fluid inside a container or container fluid and similarly inside a row there should not be row

What is container?

container is a media wise fixed width html eliment container and the width as

in minimum window width 1200 px the containers width is 1170 px, and in case minimum window width 992px the width of the container will be 970px and in munimum window width 768px the width of the container will be 750px and below 768px media window width the width of the container will be 100%

Example:

Try it yourself

<div class="container"></div>

What is container fluid?

and the container fluid is the html elemant container and its width is 100% in all media window width.

Example:

Try it yourself

<div class="container-fluid"></div>

What is a row?

a row is a container of horizontal group of column and its width is 100% according to the container or container fluid


Example:

Try it yourself

<div class="container-fluid">
	<div class="row"></div>
</div>

What is a column of bootstrap?

Content should be placed within columns, and only columns may be immediate children of rows and in case of bootstrap 3 the grid system is devided into 12 column ie you can youse 12 col-md-1 or two col-md-6 or col-md-8 and col-md-4 in a row etc.

Example:

Try it yourself

 
<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">column</div>
	</div>
</div>

Now there is several column type according to the media window width and its caracterstics

and they are: large media width column, medeam media width column, small media width column and extra small media width column,

large media width column

it is denoted by col-lg-1, col-lg-2 ….. upto col-lg-12 and the column dicidetion is worked above media width 1170px and below the media width the width of each col-lg-* becomes 100%

Example:

Try it yourself

<div class="container-fluid">
	<div class="row">
		<div class="col-lg-8">column</div>
		<div class="col-lg-4">column</div>
	</div>
</div>

medeam media width column

it is denoted by col-md-1, col-md-2 ….. upto col-md-12 and the column dicidetion is worked above media width 970px and below the media width the width of each col-md-* becomes 100% and it will work for greater media width column also if not selected column for that

Example:

Try it yourself

<div class="container-fluid">
	<div class="row">
		<div class="col-md-8">column</div>
		<div class="col-md-4">column</div>
	</div>
</div>

small media width column

it is denoted by col-sm-1, col-sm-2 ….. upto col-sm-12 and the column dicidetion is worked above media width 768px and below the media width the width of each col-sm-* becomes 100% and it will work for greater media width column also if not selected column for that

Example:

Try it yourself

 
<div class="container-fluid">
	<div class="row">
		<div class="col-sm-8">column</div>
		<div class="col-sm-4">column</div>
	</div>
</div>

extra small media width column

it is denoted by col-xs-1, col-xs-2, col-xs-3 ….. col-xs-12 its working for below 768px media width window and also work for above 768px media width id not given the class name as col-lg-* or col-md-* or col-sm-*.

Example:

Try it yourself

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-8">column</div>
		<div class="col-xs-4">column</div>
	</div>
</div>

Give a gap on the leftside of column the offset of bootstrap

like column system there is 4 type of offset for 4 type of media width device and they are: large media width offset, medeam media width offset, small media width offset and extra small media width offset,

Example:

Try it yourself

<div class="col-xs-offset-4">column</div>

large media width offset

it is denoted by col-lg-offset-1, col-lg-offset-2 ….. upto col-lg-offset-12 and the column dicidetion is worked above media width 1170px and below the media width the width of each col-lg-offset-* becomes 0px

Example:

Try it yourself

<div class="container-fluid">
	<div class="row">
		<div class="col-lg-9 col-lg-offset-3">column</div>
	</div>
</div>

medeam media width offset

it is denoted by col-md-offset-1, col-md-offset-2 ….. upto col-md-offset-12 and the column dicidetion is worked above media width 970px and below the media width the width of each col-md-* becomes 100% and it will work for greater media width column also if not selected column for that

Example:

Try it yourself

<div class="container-fluid">
	<div class="row">
		<div class="col-md-9 col-md-offset-3">column</div>
	</div>
</div>

small media width offset

it is denoted by col-sm-1, col-sm-2 ….. upto col-sm-12 and the column dicidetion is worked above media width 768px and below the media width the width of each col-sm-* becomes 100% and it will work for greater media width column also if not selected column for that

Example:

Try it yourself

<div class="container-fluid">
	<div class="row">
		<div class="col-sm-9 col-sm-offset-3">column</div>
	</div>
</div>

extra small media width offset

it is denoted by col-xs-1, col-xs-2, col-xs-3 ….. col-xs-12 its working for below 768px media width window and also work for above 768px media width id not given the class name as col-lg-offset-* or col-md-offset-* or col-sm-offset-*.

Example:

Try it yourself

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-9 col-xs-offset-3">column</div>
	</div>
</div>

Nasted Grid System of Bootstrap 3

The nasted grig is grid insid grid , suppose if you need two column with each have 6 column width and inside the column you need a 12 column row then you have to take a row and inside the row take column and inside that take column again.

Example:

Try it yourself

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-9">
			<div class="col-xs-6">
				column
			</div>
			<div class="col-xs-6">
				column
			</div>
		</div>
		<div class="col-xs-3">column</div>
	</div>
</div>

Please give your valuable comment to make the site better, Thanks for reading…

Share The Post On -

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.