BOOTSTRAP

Introduction
5

10

Bootstrap is a free front-end framework for faster and easier web development.It includes
HTML and CSS based design templates for typography, forms, buttons, tables,
navigation, modals, image carousels and many other, as well as optional JavaScript
plugins.It also gives us the ability to easily create responsive designs.Responsive web
design is about creating web sites which automatically adjust themselves to look good on
all devices, from small phones to large desktops.

Bootstrap Grid System

At a high level, heres how the grid system works:

There are three major componentscontainers, rows, and columns.

Containers.container for fixed width or .container-fluid for full widthcenter your

sites contents and help align your grid content.

15

Rows are horizontal groups of columns that ensure your columns are lined up

properly.

Content should be placed within columns, and only columns may be immediate

children of rows.

20

Column classes indicate the number of columns youd like to use out of the

possible 12 per row. So if you want three equal-width columns, youd use .col-sm-4.

Column widths are set in percentages, so theyre always fluid and sized relative to

their parent element.

Columns have horizontal padding to create the gutters between individual

columns.
25

There are five grid tiers, one for each responsive breakpoint: extra small, small,

medium, large, and extra large.

Grid tiers are based on minimum widths, meaning they apply to that one tier and

all those above it (e.g., .col-sm-4 applies to small, medium, large, and extra large
devices).

You can use predefined grid classes for more semantic markup.

Container-> Row-> Columns -> xs,sm,md,lg

10

The Bootstrap grid system has four classes:

xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)

15

The classes above can be combined to create more dynamic and flexible layout.

Responsive breakpoints
Since Bootstrap is developed to be mobile first, we use a handful of media queries to
create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly

based on minimum viewport widths and allow us to scale up elements as the viewport
changes.

// Extra small devices (portrait phones, less than 34em)

5

// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 34em and up)

@media (min-width: 34em) { ... }

10

// Medium devices (tablets, 48em and up)

@media (min-width: 48em) { ... }

// Large devices (desktops, 62em and up)

@media (min-width: 62em) { ... }
15

// Extra large devices (large desktops, 75em and up)

@media (min-width: 75em) { ... }

Extra
small
devices
Phones
(<768px)

Small
devices
Tablets
(>=768px)

Medium devices
Desktops
(>=992px)

Large devices
Desktops
(>=1200px)

Container width

None (auto)

750px

970px

1170px

Class Prefix

.col-xs-

.col-sm-

.col-md-

.col-lg-

12

12

12

12

Auto

~62px

~81px

~97px

Number
columns

of

Column width

20

REFERENCES:

 http://v4-alpha.getbootstrap.com/layout/grid/
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp