Bootstrap Grid System
Uploaded by
Anonymous EaHxdJwBootstrap Grid System
Uploaded by
Anonymous EaHxdJwBootstrap
Grid System
Jogesh K. Muppala
Viewport
<meta name="viewport" content="width=device-width,
iniBal-scale=1">
The viewport meta tag:
Ensures that the screen width is set to the device width
and the content is rendered with this width in mind
Designing the websites to be responsive to the size of the
viewport
Bootstrap grid system
Bootstrap Grid
Designed to be:
Responsive
Mobile rst
Fluid
Bootstrap Grid
<div class=container>
<div class=row>
1
10
11
12
Bootstrap Grid
<div class=container>
<div class=row>
<div class=col-sm-5>
<div class=col-sm-7>
10
11
12
Bootstrap Grid
Bootstrap makes available four classes
xs for extra small
sm for small
md for medium, and
lg for large screen sizes
Each row in Bootstrap grid system is divided into 12 columns
Use the classes .col-xs-*, .col-sm-*, col-md-*, and .col-lg-* for dening the
layouts for the various screen sizes
Specify how many columns each piece of content will occupy within a row,
all adding up to 12 or a mulBple thereof
Bootstrap Grid Details
Extra small
( < 768 px)
Small
( 768px)
Typical Form factor Mobile phones Tablets
Medium
( 992 px)
Large
( 1200px)
Laptops
Desktops
Grid behavior
Horizontal
Collapsed to start, horizontal above breakpoints
Container width
None (auto)
750px
970px
1170px
Class prex
.col-xs-
.col-sm-
.col-md-
.col-lg-
# of columns
12
12
12
12
Column width
Auto
~62px
~81px
~97px
Guger width
30px (15px on each side)
Using Column classes
Extra Small Screens
<div class=colxs-12 col-sm-5>
Small, Medium and Large Screens
<div class=col<div class=col-xs-12
xs-12 col-sm-5> col-sm-7>
<div class=colxs-12 col-sm-7>
Using Column Push and Pull
Extra Small Screens
<div class=colxs-12 col-sm-5
col-sm-push-7>
Small, Medium and Large Screens
<div class=col-xs-12
col-sm-7 col-smpull-5>
<div class=colxs-12 col-sm-5
col-sm-push-7>
<div class=colxs-12 col-sm-7
col-sm-pull-5>
Column Osets
<div class=container>
<div class=row>
1
<div class=col-sm-4
col-sm-oset-1>
<div class=col-sm-7>
10
11
12
10
NesBng Columns
<div class=container>
<div class=row>
<div class=col-sm-5>
<div class=col-sm-7>
<div class=row>
6
7
8
9 10
<div class=col-sm-9>
11 12
<div
class=colsm-3>
11
Exercise: Responsive Design and
Bootstrap Grid System
Create responsive websites using the Bootstrap grid
system
Customize the CSS classes through your own
addiBons in a separate CSS le
12
