Bootstrap Grid System

In the previous chapter we have learnt about the basics of Bootstrap with CSS. In this tutorial we are looking into the Grid system in bootstrap.

What is Grid System ?

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Working of Bootstrap Grid System :

Grid systems are used for creating page layouts through a series of rows and columns, following are some rules for using grids in Bootstrap layout :

  1. Rows must be placed within a .container class for proper alignment and padding.
  2. Use rows to create horizontal groups of columns.
  3. Content should be placed within columns, and only columns may be immediate children of rows.
  4. Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.
  5. Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  6. Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.

Media Queries :

  1. Media queries can be used to apply CSS rules conditionally to HTML elements.
  2. If the condition specified in the media query is satisfied then only the specified CSS styles will be applied to the tag.
  3. Media Queries in Bootstrap allow you to move, show and hide content based on viewport size.

Following media queries are used in LESS files to create the key breakpoints in the Bootstrap grid system –

/* 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-md-min) { ... }

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

In the above case we have just specified the minimum width of the device. Lets understand the meaning of the above queries –

@media (min-width: @screen-sm-min) { color : red }

In the above query, we need to change the color of the text to red if and only if minimum width of the device is @screen-sm-min i.e 750px.

Grid options :

Extra small devices
Phones (<768px)
Small devices
Tablets (=768px)
Medium devices
Desktops (=992px)
Large devices
Desktops (=1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto 60px 78px 95px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Basic Grid Structure :

<div class="container">
   <div class="row">
      <div class="col-##-#"></div>
      <div class="col-##-#"></div>      
   <div class="row">
      <div class="col-##-#"></div>
      <div class="col-##-#"></div>      
   <div class="row">...</div>
<div class="container">....