Bootstrap grid system

A deep understading on how Bootstrap's grid system works, presented in a trial/error way. After digging into all the tips & tricks grid systems use, it will be easier to hack it in the future.

Transcript

1. Bootstrap Grid System
2. The box-sizing property This is some text inside the box, justified so we can see which area is being used content-box padding-box border-box padding border margin
3. Let’s practice! .container { width: 300px; } .box { width: 50%; margin: 3px; border: solid 2px #000; padding: 5px; } <div class="container"> <div class="box">Text!</div> </div> size in pixels? Text! padding border
4. Grid systems (e.g. bootstrap, 960gs) • Flexible number of columns (col-1, col-2…) • Space between columns (a.k.a. the “gutter”) • Full width of the container is used • We can move columns (loffset-1, roffset-2…) .col-1 .col-1 .col-1 .col-1 .col-1 .col-1 .col-1 .col-1 .col-1 .col-1 .col-1 .col-1 .container .col-3 .pull-2
5. Grid systems (e.g. bootstrap, 960gs) • Flexible number of columns (col-1, col-2…) • Space between columns (a.k.a. the “gutter”) • Full width of the container is used • We can move columns (loffset-1, roffset-2…) @grid-gutter-width: 30px; @grid-columns: 12;
6. Grid systems (e.g. bootstrap, 960gs) • Flexible number of columns (col-1, col-2…) • Space between columns (a.k.a. the “gutter”) • Full width of the container is used • We can move columns (loffset-1, roffset-2…) @grid-gutter-width: 30px; @grid-columns: 12; .col-@{c} { width: percentage(@c / @grid-columns); }
7. Grid systems (e.g. bootstrap, 960gs) • Flexible number of columns (col-1, col-2…) • Space between columns (a.k.a. the “gutter”) • Full width of the container is used • We can move columns (loffset-1, roffset-2…) @grid-gutter-width: 30px; @grid-columns: 12; .loop(@c) when (@c > 0) { .loop((@c - 1)); .col-@{c} { width: percentage(@c / @grid-columns); } } .loop(@grid-columns);
8. Grid systems (e.g. bootstrap, 960gs) • Flexible number of columns (col-1, col-2…) • Space between columns (a.k.a. the “gutter”) • Full width of the container is used • We can move columns (loffset-1, roffset-2…) @grid-gutter-width: 30px; @grid-columns: 12; .loop(@c) when (@c > 0) { .loop((@c - 1)); .col-@{c} { width: percentage(@c / @grid-columns); } } .loop(@grid-columns);
9. Grid systems (e.g. bootstrap, 960gs) • Flexible number of columns (col-1, col-2…) • Space between columns (a.k.a. the “gutter”) • Full width of the container is used • We can move columns (loffset-1, roffset-2…) @grid-gutter-width: 30px; @grid-columns: 12; .loop(@c) when (@c > 0) { .loop((@c - 1)); .col-@{c} { width: percentage(@c / @grid-columns); } } .loop(@grid-columns); .col { float: left; }
10. Grid systems (e.g. bootstrap, 960gs) • Flexible number of columns (col-1, col-2…) • Space between columns (a.k.a. the “gutter”) • Full width of the container is used • We can move columns (loffset-1, roffset-2…) @grid-gutter-width: 30px; @grid-columns: 12; .loop(@c) when (@c > 0) { .loop((@c - 1)); .col-@{c} { width: percentage(@c / @grid-columns); } } .loop(@grid-columns); .col { float: left; }
11. Grid systems (e.g. bootstrap, 960gs) • Flexible number of columns (col-1, col-2…) • Space between columns (a.k.a. the “gutter”) • Full width of the container is used • We can move columns (loffset-1, roffset-2…) @grid-gutter-width: 30px; @grid-columns: 12; .loop(@c) when (@c > 0) { .loop((@c - 1)); .col-@{c} { width: percentage(@c / @grid-columns); } } .loop(@grid-columns); .col { float: left; }
12. Grid systems (e.g. bootstrap, 960gs) • Flexible number of columns (col-1, col-2…) • Space between columns (a.k.a. the “gutter”) • Full width of the container is used • We can move columns (loffset-1, roffset-2…) @grid-gutter-width: 30px; @grid-columns: 12; .loop(@c) when (@c > 0) { .loop((@c - 1)); .col-@{c} { width: percentage(@c / @grid-columns); } } .loop(@grid-columns); .col { float: left; padding: 0 (@grid-gutter-width / 2); }
13. Grid systems (e.g. bootstrap, 960gs) • Flexible number of columns (col-1, col-2…) • Space between columns (a.k.a. the “gutter”) • Full width of the container is used • We can move columns (loffset-1, roffset-2…) @grid-gutter-width: 30px; @grid-columns: 12; .loop(@c) when (@c > 0) { .loop((@c - 1)); .col-@{c} { width: percentage(@c / @grid-columns); } } .loop(@grid-columns); .col { float: left; padding: 0 (@grid-gutter-width / 2); }
14. Grid systems (e.g. bootstrap, 960gs) • Flexible number of columns (col-1, col-2…) • Space between columns (a.k.a. the “gutter”) • Full width of the container is used • We can move columns (loffset-1, roffset-2…) @grid-gutter-width: 30px; @grid-columns: 12; .loop(@c) when (@c > 0) { .loop((@c - 1)); .col-@{c} { width: percentage(@c / @grid-columns); } } .loop(@grid-columns); .col { float: left; padding: 0 (@grid-gutter-width / 2); }
15. Grid systems (e.g. bootstrap, 960gs) • Flexible number of columns (col-1, col-2…) • Space between columns (a.k.a. the “gutter”) • Full width of the container is used • We can move columns (loffset-1, roffset-2…) @grid-gutter-width: 30px; @grid-columns: 12; .loop(@c) when (@c > 0) { .loop((@c - 1)); .col-@{c} { width: percentage(@c / @grid-columns); } } .loop(@grid-columns); .col { float: left; padding: 0 (@grid-gutter-width / 2); box-sizing: border-box; }
16. Grid systems (e.g. bootstrap, 960gs) • Flexible number of columns (col-1, col-2…) • Space between columns (a.k.a. the “gutter”) • Full width of the container is used • We can move columns (loffset-1, roffset-2…) @grid-gutter-width: 30px; @grid-columns: 12; .loop(@c) when (@c > 0) { .loop((@c - 1)); .col-@{c} { width: percentage(@c / @grid-columns); } } .loop(@grid-columns); .col { float: left; padding: 0 (@grid-gutter-width / 2); box-sizing: border-box; }
17. Grid systems (e.g. bootstrap, 960gs) • Flexible number of columns (col-1, col-2…) • Space between columns (a.k.a. the “gutter”) • Full width of the container is used • We can move columns (loffset-1, roffset-2…) @grid-gutter-width: 30px; @grid-columns: 12; .loop(@c) when (@c > 0) { .loop((@c - 1)); .col-@{c} { width: percentage(@c / @grid-columns); } } .loop(@grid-columns); .col { float: left; padding: 0 (@grid-gutter-width / 2); box-sizing: border-box; } .container { margin: 0 -(@grid-gutter-width / 2); }
18. Grid systems (e.g. bootstrap, 960gs) • Flexible number of columns (col-1, col-2…) • Space between columns (a.k.a. the “gutter”) • Full width of the container is used • We can move columns (loffset-1, roffset-2…) @grid-gutter-width: 30px; @grid-columns: 12; .loop(@c) when (@c > 0) { .loop((@c - 1)); .col-@{c} { width: percentage(@c / @grid-columns); } } .loop(@grid-columns); .col { float: left; padding: 0 (@grid-gutter-width / 2); box-sizing: border-box; } .container { margin: 0 -(@grid-gutter-width / 2); }
19. Grid systems (e.g. bootstrap, 960gs) • Flexible number of columns (col-1, col-2…) • Space between columns (a.k.a. the “gutter”) • Full width of the container is used • We can move columns (loffset-1, roffset-2…) @grid-gutter-width: 30px; @grid-columns: 12; .loop(@c) when (@c > 0) { .loop((@c - 1)); .col-@{c} { width: percentage(@c / @grid-columns); } } .loop(@grid-columns); .col { float: left; padding: 0 (@grid-gutter-width / 2); box-sizing: border-box; } .container { margin: 0 -(@grid-gutter-width / 2); }
20. Grid systems (e.g. bootstrap, 960gs) • Flexible number of columns (col-1, col-2…) • Space between columns (a.k.a. the “gutter”) • Full width of the container is used • We can move columns (loffset-1, roffset-2…)
21. Grid systems (e.g. bootstrap, 960gs) • Flexible number of columns (col-1, col-2…) • Space between columns (a.k.a. the “gutter”) • Full width of the container is used • We can move columns (loffset-1, roffset-2…) @grid-gutter-width: 30px; @grid-columns: 12; .loop(@c) when (@c > 0) { .loop((@c - 1)); .loffset-@{c} { margin-left: percentage(@c / @grid-columns); } .roffset--@{c} { margin-right: percentage(@c / @grid-columns); } } .loop(@grid-columns);
22. Hacking design “Create a layout with 5 columns, equally distributed, occupying the full size of the body” 12 / 5 = 2.4 @grid-gutter-width: 30px; @grid-columns: 12; .my-fancy-column { width: percentage(1 / 5); padding: 0 (@grid-gutter-width / 2); box-sizing: border-box; float: left; }
23. Case of use: Bootstrap
24. Case of use: Bootstrap .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, [...] { position: relative; padding-left: 15px; padding-right: 15px; }
25. Case of use: Bootstrap .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, [...] { position: relative; padding-left: 15px; padding-right: 15px; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, [...] { float: left; } .col-xs-12 { width: 100%; } .col-xs-11 { width: 91.66666667%; } [...] .col-sm-2 { width: 16.66666667%; } .col-xs-1 { width: 8.33333333%; }
26. Case of use: Bootstrap .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, [...] { position: relative; padding-left: 15px; padding-right: 15px; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, [...] { float: left; } .col-xs-12 { width: 100%; } .col-xs-11 { width: 91.66666667%; } [...] .col-sm-2 { width: 16.66666667%; } .col-xs-1 { width: 8.33333333%; } @media (min-width: 768px) { }
27. Case of use: Bootstrap .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, [...] { position: relative; padding-left: 15px; padding-right: 15px; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, [...] { float: left; } .col-xs-12 { width: 100%; } .col-xs-11 { width: 91.66666667%; } [...] .col-sm-2 { width: 16.66666667%; } .col-xs-1 { width: 8.33333333%; } @media (min-width: 768px) { .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, [...] { float: left; } .col-sm-12 { width: 100%; } .col-sm-11 { width: 91.66666667%; } [...] .col-sm-2 { width: 16.66666667%; } .col-sm-1 { width: 8.33333333%; } }
28. Case of use: Bootstrap .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, [...] { position: relative; padding-left: 15px; padding-right: 15px; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, [...] { float: left; } .col-xs-12 { width: 100%; } .col-xs-11 { width: 91.66666667%; } [...] .col-sm-2 { width: 16.66666667%; } .col-xs-1 { width: 8.33333333%; } @media (min-width: 768px) { .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, [...] { float: left; } .col-sm-12 { width: 100%; } .col-sm-11 { width: 91.66666667%; } [...] .col-sm-2 { width: 16.66666667%; } .col-sm-1 { width: 8.33333333%; } }