This document provides an overview and examples of Bootstrap, an open-source front-end framework for building responsive mobile-first websites and web apps. It discusses what Bootstrap is, the pre-built HTML and CSS components it contains, how to use its grid system including different screen sizes, and provides examples of websites built with Bootstrap. The speaker is Woratana Ngarmtrakulchol, a front-end developer and founder of Designil.com who is interested in topics like WordPress, front-end development, and web design.

2. Speaker
Woratana Ngarmtrakulchol (Perth)
● Founder of Designil.com
● Front-end Developer at Neumerlin
Communications co. ltd.
● Front-end Developer & Co-
founder at Midnize Studio and
Concept Reach
Interested in: WordPress, Front-end
development, Web Design, HTML5 Game

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

4. 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
http://unroll.me

8. Websites created by Bootstrap
www.fliplingo.com

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

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

11. Bootstrap CDN
www.bootstrapcdn.com

12. Bootstrap Playground
http://bit.ly/bs-play

13. Bootstrap Components
Start Workshop

14. What is Grid in web design?

15. What is Grid in web design?
12 Grid
1 2 3 4 5 6 7 8 9 10 11 12

16. What is Grid in web design?
4 Grids x 3 Columns
= 12 Grids
1 2 3 4 5 6 7 8 9 10 11 12
4 Grid 4 Grid 4 Grid

17. Bootstrap Grid
12 Responsive Grid

18. Grid Overlay
for Bootstrap & Foundation
http://bit.ly/grid-overlay

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

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

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

22. Bootstrap Grid Example
4 grids x 3 Columns

23. Bootstrap Grid Example

24. Bootstrap Grid Example

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

26. Bootstrap Grid Example 2
6 grids x 2 Columns

27. Bootstrap Grid Example 2

28. Bootstrap Grid Example 2

29. Bootstrap Row
1 Row = 12 Grids

30. Bootstrap Row
3 Rows

31. Bootstrap Row Example

32. Bootstrap Row Example

33. Bootstrap Responsive Grid
Columns will stack when responsive

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

35. Bootstrap Grid Workshop
3 Easy Steps:
1. Add container
2. Add row
3. Add columns

36. Bootstrap Grid Workshop
http://bit.ly/bs-business

37. Thank you for sleeplistening
Question?
Woratana ( Perth )
Twitter: @woraperth
www.designil.com