a blog for those who code

Friday 19 June 2015

Introducing BootStrap Grid System

In this post we will go through Bootstrap Grid System. Previously developers was using tables to layout pages, as they were easy to use. The problem of using tables is that it will post an extra challenge over the web browsers and the performance will degrade significantly. That's where Bootstrap Grid System will come into picture as the grids will behave like a table but will increase the performance over traditional tables approach.

According to Bootstrap, it includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or view-port size increases. It includes predefined classes for easy layout options, as well as powerful mix-ins for generating more semantic layouts. The statement means that bootstrap offers support for mobile browsers and different sized screens by providing different grids for different screen sizes. There are four screen-sizes provided by bootstrap grids.

PC : http://getbootstrap.com/css/#grid-intro

Bootstrap uses media queries in their Less files to create the key breakpoints in their grid system. Media Queries in Bootstrap will allow the content to be moved, showed or to hide based on the browser view-port.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-sm-min) { ... }

Bootstrap grid system works across multiple devices by using the below Grid options.

PC : http://getbootstrap.com/css/#grid-options

Basic Structure of Bootstrap grid

<div class="container">
    <div class="row">
<div class="col-md-2">2 Column Structure</div>
<div class="col-md-2">2 Column Structure</div>
<div class="col-md-2">2 Column Structure</div>
<div class="col-md-2">2 Column Structure</div>
<div class="col-md-2">2 Column Structure</div>
<div class="col-md-2">2 Column Structure</div>
    </div>
    <div class="row">
<div class="col-md-3">3 Column Structure</div>
<div class="col-md-3">3 Column Structure</div>
<div class="col-md-3">3 Column Structure</div>
<div class="col-md-3">3 Column Structure</div>
    </div>
    <div class="row">
<div class="col-md-4">4 Column Structure</div>
<div class="col-md-4">4 Column Structure</div>
<div class="col-md-4">4 Column Structure</div>
    </div>
    <div class="row">
<div class="col-md-6">6 Column Structure</div>
<div class="col-md-6">6 Column Structure</div>
    </div>
</div>

Result of the above Structure :

Please Like and Share the Blog, if you find it interesting and helpful.

No comments:

Post a Comment