Bootstrap Grid system plays key role in front end development. Bootstrap grid system allow us to create fluid responsive layout designs faster and easy way.
In Bootstrap, we are having mobile first fluid grid system up to 12 columns to scales appropriately by increasing or decreasing the width of respective devices. The key break points for grid system based on the respective device width is depends on defined @media attribute minimum and maximum widths
Grid systems are used to create page layouts with rows and columns. Lets take a look on how to use grid system in bootstrap.
We are having predefined class .row to define rows. Rows must be placed in the container for proper padding and alignment.
For columns we are having various class for different devices based on device width to create responsive design view. In grid system devices classified as xs, sm, md, lg.
xs is extra small screen devices with maximum of 768px width and below (i.e., phones)sm is small screen deices with minimum of 768px width and maximum of 992px width (i.e., tablets)md is medium screen devices with minimum of 992px width and maximum of 1200px width (i.e., desktops)lg is large screen devices with minimum of 1200px width and above (i.e., large desktops)
Here we have predefined column classes are .col-xs/sm/md/lg-* (* is width of column in terms of columns).
we already know that grid system scales appropriately up to 12 columns.
Take look on this below code to get clear knowledge on these grid system columns
<div class="container">
<br />
<h2 class="page-header">
Three columns in a row for all devices
</h2>
<div class="row">
<!-- the below code is for 3 columns in a row for all devices-->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<p class="text-danger">
One of three columns in a row example. DotNetFunda.Com
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<p class="text-info">
Two of three columns in a row example. DotNetFunda.Com
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<p class="text-success">
Three of three columns in a row example. DotNetFunda.Com
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<p class="text-warning">
Four of three columns in a row example. DotNetFunda.Com
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<p class="text-primary">
Five of three columns in a row example. DotNetFunda.Com
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<p class="text-danger">
Six of three columns in a row example. DotNetFunda.Com
</p>
</div>
</div>
<br />
<h2 class="page-header">
Reduce the no of coumns in a row based on the device
</h2>
<div class="row">
<!-- the below code is for in a row 6 columns for large screen, 4 columns for medium screen, 3 columns for small screen and 2 columns for extra small screen -->
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p class="text-danger">
1st column example. DotNetFunda.Com
</p>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p class="text-info">
2nd column example. DotNetFunda.Com
</p>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p class="text-success">
3rd column example. DotNetFunda.Com
</p>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p class="text-warning">
4th column example. DotNetFunda.Com
</p>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p class="text-primary">
5th column example. DotNetFunda.Com
</p>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p class="text-danger">
6th column example. DotNetFunda.Com
</p>
</div>
</div>
</div>
The out put of the respective screens are as shown below:
In large display screens:
In this only large screen classes .col-lg-4 and .col-lg-2 will applied for those respective tags.
In medium display screens:
In this only medium screen classes .col-md-4 and .col-md-3 will applied for those respective tags.
In small display screens:
In this only small screen classes .col-sm-4 and .col-sm-4 will applied for those respective tags.
In extra small display screens:
In this only extra small screen classes .col-xs-4 and .col-xs-6 will applied for those respective tags.
In the code we used class for all four predefined device widths. If we need design for only some of them remove the remaining classes like class="col-md-* col-xs-*". Here we given class for extra small and medium devices.
We have .clearfix class in grid system to set the column heights and appear correctly with in bounded area in responsive designs, If their column heights doesn't match with each other.
we are using .clearfix class along with bootstrap utility helper class.
<div class="container">
<h2>Columns without clearfix class</h2>
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p class="text-danger">1st column example. DotNetFunda.Com. DotNetFunda.Com.1st column example. DotNetFunda.Com</p>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p class="text-info">2nd column example. DotNetFunda.Com</p>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p class="text-success">3rd column example. DotNetFunda.Com</p>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p class="text-warning">4th column example. DotNetFunda.Com</p>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p class="text-primary">5th column example. DotNetFunda.Com</p>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p class="text-danger">6th column example. DotNetFunda.Com</p>
</div>
</div>
<br />
<h2>Columns with clearfix class</h2>
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p class="text-danger">1st column example. DotNetFunda.Com. DotNetFunda.Com.1st column example. DotNetFunda.Com</p>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p class="text-info">2nd column example. DotNetFunda.Com</p>
</div>
<!-- it fixes the row hieght in xtra small screens -->
<div class="clearfix visible-xs"></div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p class="text-success">3rd column example. DotNetFunda.Com</p>
</div>
<!-- it fixes the row hieght in small screens -->
<div class="clearfix visible-sm"></div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p class="text-warning">4th column example. DotNetFunda.Com</p>
</div>
<!-- it fixes the row hieght in medium screens -->
<div class="clearfix visible-md"></div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p class="text-primary">5th column example. DotNetFunda.Com</p>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<p class="text-danger">6th column example. DotNetFunda.Com</p>
</div>
</div>
</div>In large display screens:
For large screens we doesn't use .clearfix class. In the below image we can observe the both scenarios are same.
In medium display screens:
For medium screens we used .clearfix class after four columns because we showed four columns in a row for medium screens. Here in the first case 1st column takes two rows place, in the second scenario .clearfix class sets the heights as same for first four columns. In the below image we can observe that.
In small display screens:
For small screens we used .clearfix class after three columns because we showed three columns in a row for small screens. Here in the first case 1st column takes two rows place, in the second scenario .clearfix class sets the heights as same for first three columns. In the below image we can observe that.
In extra small display screens:
For extra small screens we used .clearfix class after two columns because we showed two columns in a row for extra small screens. Here in the first case 1st column takes two rows place, in the second scenario .clearfix class sets the heights as same for first two columns. In the below image we can observe that.
If we observe the above pictures, we got the clear difference between the columns with and without .clearfix classes
Bootstrap Grid system we have .col-xs/sm/md/lg-offset-*(* is 0 to 12) classes to set columns placement after certain no of columns which we mentioned in the class name.
<div class="container">
<h2>Offset class columns</h2>
<div class="row">
<div class="col-md-offset-6">
<p class="thumbnail">This is column with offset style</p>
</div>
<div class="col-md-6">
<p class="thumbnail">This is column with six columns width</p>
</div>
<div class="col-md-2 col-md-offset-4">
<p class="thumbnail">This is column with offset style with two columns width</p>
</div>
</div>In this code, the first column placed after six columns with auto width and in the third column we have defined column width as 2 columns(out of 12 columns) and it was placed
after 4 columns (out of 12) width from the second column. We will observed that in the below image.
Using bootstrap grid system we will able to create nested columns faster and easy way.
<h2>Nested columns</h2>
<div class="row">
<div class="col-md-4">
<p class="thumbnail">This text placed in column with four columns width</p>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-6">
<p class="thumbnail">nested column</p>
</div>
<div class="col-md-6">
<p class="thumbnail">nested column</p>
</div>
<div class="col-md-6">
<p class="thumbnail">nested column</p>
</div>
<div class="col-md-6">
<p class="thumbnail">nested column</p>
</div>
</div>
</div>
<div class="col-md-4">
<p class="thumbnail">This text placed in column with four columns width</p>
</div>
</div>We can easily create nested columns in bootstrap.In the above code, we will have nested columns in place of second column. Nested columns is normal grid system columns those are placed inside the grid system column.We will observe the same in the below image.
In Bootstrap grid system we have another useful pull-* and push-* classes along with .col-xs/sm/md/lg- prefix classes to order columns in a manner.
<h2>Ordered columns</h2>
<div class="row">
<div class="col-md-4 col-md-push-4">
<p class="thumbnail">1st column ordering to second. This is pushed to after four columns width</p>
</div>
<div class="col-md-4 col-md-pull-4">
<p class="thumbnail">2nd column ordering first. This is pulled front to four columns</p>
</div>
<div class="col-md-4">
<p class="thumbnail">This column is placed with out ordering.</p>
</div>
</div>In the above code, The first column the ordered class as .col-md-push-4 is pushes the column to after 4 columns from its actual placement with the column width of 4 columns. the second column the ordered class as .col-md-pull-4 is pull the column forward to 4 columns from its actual placement. We will observe the same in the below image
In this article, we have learnt working with grid system in bootstrap, Hope this article was useful.
We will see more about bootstrap in following articles. D
Thanks for reading and do refer www.dotnetfunda.com to your friends and colleagues.