1. Introduction to Bootstrap

2. Bootstrap is Front-end Framework
Bootstrap is Front-end Framework
HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

3. Bootstrap is Ready-to-use Web Elements
HTML / CSS elements for button, form, table, image, navbar, label, progress bar, alert etc.

5. EXAMPLES of Bootstrap Elements

6. more EXAMPLES of Bootstrap Elements

7. Websites created by Bootstrap www.fliplingo.com

8. Why Bootstrap? Save 100+ hours of coding Easy to use web elements
Quick responsive prototype / website
Great documentation

9. Bootstrap Package CSS - bootstrap.css JS - bootstrap.js
Icon Fonts - glyphicons-halflings-regular.ttf

10. What is Grid in web design?

11. What is Grid in web design?
12 Grid

12. What is Grid in web design?
4 Grids x 3 Columns
= 12 Grids

13. Bootstrap Grid
12 Responsive Grid

14. Grid Overlay for Bootstrap & Foundation
Grid Overlay
for Bootstrap & Foundation

15. 4 Sizes of Bootstrap Grid
Size Name
Screen Size
CSS Class
Extra Small Devices (Phone) px
.col-xs-1 ~ .col-xs-12
Small Devices (Tablet) px
.col-sm-1 ~ .col-sm-12
Medium Devices (Desktop) px
.col-md-1 ~ .col-md-12
Large Devices (Large screen desktop)
1200px +
.col-lg-1 ~ .col-lg-12

16. Bootstrap Grid Example http://bit.ly/bs-agency
How many grids in each box?

17. Bootstrap Grid Example
4 grids x 3 Columns

18. Bootstrap Grid Example

19. Bootstrap Grid Example

20. Bootstrap Grid Example 2
How many grids in each box?

21. Bootstrap Grid Example 2
6 grids x 2 Columns

22. Bootstrap Grid Example 2

23. Bootstrap Grid Example 2

24. Bootstrap Row
1 Row = 12 Grids

25. Bootstrap Row
3 Rows

26. Bootstrap Row Example

27. Bootstrap Row Example

28. Bootstrap Responsive Grid
Columns will stack when responsive

29. Bootstrap Responsive Grid
Desktop Mobile 1
2 3 1 2
Columns stack on mobile 3