1. Chapter 2 Bootstrap Grid System

2. 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

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

4. Building a Basic Grid
Delete H1 tag in BODY
Write

5. Basic container class
container : appear center
container-fluid

6. Create Row

7. 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

8. col-xs-6

9. give each one a background color

10. 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)

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

12. two rows and four columns in our layout

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

14. Tablet view

15. Mobile display

16. Designing for Desktops blog.htm

20. Designing for Tablets

21. Designing for Mobile

22. Nesting Columns

24. Offsetting Columns

25. Reordering Grids Manually