Skip to main content

Posts

Showing posts from January, 2014

Bootstrap: Part2: Understanding Grid System

Bootstrap is using grid system to assign width to html element. This gird system is based on 12-equal-units, means grid is like a container which consist of 12-logical units.    If we want to divide our page into 2 equal parts then we can use this grid-system by assigning 6-logical units to each part of the page, and it can be done with the help of CSS class (.col-xx-N)   CSS class being used for grid system is of the forms ".col-xx-N" where "xx" denotes the screen size "N" denotes the no. of logical unit There are 4 different kind of "xx" based on your screen size     col-lg    (large for larger desktops) col-md (medium for desktops) col-sm (small for tablets) col-xs   (extra small for phones) Here are some examples for visualizations With equal width .col-xx-12 .col-xx-6 .col-xx-6 .col-xx-4 .col-xx-4 .col-xx-4 .col-xx-3 .col-xx3 .col-xx-3 .co...

Bootstrap-3: Part-1: Getting started with Bootstrap3

Bootstrap is an open source framework for building awesome web-sites. It is collection of "javascript, css & images". Bootstrap also provides responsive design to adapt your site to mobile devices. Here we'll see from where to get bootstrap and how to use it in our page. 1. Get the bootstrap    go to " http://getbootstrap.com/ " and click the " Download Bootstrap " button    By default it'll start downloading latest version (bootstrap 3.0 as of 4Jan2014)    If you want to download other version of bootstrap look into the footer of this opened-website. 2.  Unzip downloaded file  Copy the downloaded "zip" file in your web development file location   e.g. "C:\Bootstrap\Bootstrap-3" and "unzip" this file.     After unzipping it you'll be able to see "dist" file, inside this you'll   find 3 different folder "css", "js", "fonts" folders at the same fo...