bootstrap-grid-system

Bootstrap Tutorial For Beginners – Grid System

This entry is part 2 of 2 in the series Bootstrap Tutorials
Share on Facebook0Share on LinkedIn0Tweet about this on Twitter0Share on TumblrShare on Google+0Share on StumbleUpon0

Welcome back fellas, this is the second part in the bootstrap tutorial series, today we will be covering  bootstrap’s grid system, if you are looking for or don’t have a hint about bootstrap, I recommend you reading first tutorial and understand what is bootstrap and how to begin with it.

To start, bootstrap is a responsive web-designing framework, by responsive, we mean adaptation as to how your layout adapts the devices width, and bootstrap achieves it through breaking the page into 12 columns knows as grid, making no sense? Just Imagine that your webpage is divided into twelve equal columns like in the picture below.

bootstrap grid system
bootstrap grid system

So how would that make my page responsive? To make a page responsive, bootstrap says, always place your content inside column(s) and decide how many columns should your content take, so for instance if I have a portfolio section and I want each portfolio item to span 25% of the screen width, then I’ll give each item 3 columns. Easy enough right? Yes pretty neat, but wait there’s a catch, what happens if the screen width reduces? Will it still span 3 columns? If yes, won’t the content get so squeezed up that it is unreadable? Then what’s the benefit of placing it in columns?

Here comes Bootstrap to rescue you again, bootstrap define 4 breakpoints, you can think of them as viewports or devices. The four break points are

Bootstrap Breakpoints
Bootstrap Breakpoints

*Short forms / Class Prefices: Large : lg, Medium : md, Small : sm, Extra-small (Tiny) : xs

Bootstrap Breakpoints!

As you know responsiveness is created by using media queries (In one line media queries are a condition which when evaluates to true, the browser applies the CSS written between the block). Bootstrap’s framework includes all the required media queries so you don’t have to worry.

Here’s the eacample, we will be creating a product page layout which will have four products in each row on a large view-port (Large Desktop Monitor), as the screen scales dow n to medium, small and extra small devices we will have 3, 2 and 1 product respectively on each row.

Each viewport class you see here gets activated on its specific viewport, for example col-sm-6 will reflect changes only on small device (unless you dont have a higher viewport class) , so we should know precedence of viewport’s in bootstrap framework. Here’s a complete guide on bootstrap grid system.

Precedence of viewports in bootstrap

It works on two thumb rules :

  1. The child gives what he has to his parent, i.e. if I define only breakpoint of small viewport (col-sm-6), then both “md” and “lg” will span 6 columns each.
  2. The child gets everything, i.e. if I define col-sm-6 then its child “xs” will span all 12 columns.

At a glance below are the grid options which comes handy everytime.

Bootstrap Grid Options
Bootstrap Grid Options

 

 

 

Series Navigation<< Bootstrap Tutorial For Beginners – Introduction and Installation
Share on Facebook0Share on LinkedIn0Tweet about this on Twitter0Share on TumblrShare on Google+0Share on StumbleUpon0