Chapter 2 Bootstrap Grid System

One of the most important features of bootstrap Multiple rows and column Can put HTML in each row and column cell 12 columns for each row Responsive : columns size will resize when browser window change

Grid system : 1 row divide into 12 columns Each column has own distinct background color

Building a Basic Grid Delete H1 tag in BODY Write

Basic container class container : appear center container-fluid

Create Row

Create columns How many 12 col available to span 12 col span use class : col-xs-12 6 col span use class : col-xs-6

col-xs-6

give each one a background color

xs stand for in the class col-xs-6 1. col-xs for extra small displays (screen width < 768px) 2. col-sm for smaller displays (screen width ≥ 768px) 3. col-md for medium displays (screen width ≥ 992px) 4. col-lg for larger displays (screen width ≥ 1200px)

Bootstrap will automatically follow the layout specified for the smallest screen size. Hence, div will span 12 columns in all types

two rows and four columns in our layout

Creating a Dynamic Layout creating a dynamic layout that adjusts to the size of device it is viewed in.

Tablet view

Mobile display

Designing for Desktops blog.htm

Designing for Tablets

Designing for Mobile

Nesting Columns

Offsetting Columns

Reordering Grids Manually