Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bootstrap grid system

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.

Avatar for Miguel Jiménez

Miguel Jiménez

June 19, 2015
Tweet

More Decks by Miguel Jiménez

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  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…) @grid-gutter-width: 30px; @grid-columns: 12;
  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; .col-@{c} { width: percentage(@c / @grid-columns); }
  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; .loop(@c) when (@c > 0) { .loop((@c - 1)); .col-@{c} { width: percentage(@c / @grid-columns); } } .loop(@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); .col { float: left; }
  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; padding: 0 (@grid-gutter-width / 2); }
  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); box-sizing: border-box; }
  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; } .container { margin: 0 -(@grid-gutter-width / 2); }
  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…)
  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…) @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);
  21. 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; }
  22. 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; }
  23. 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%; }
  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; } .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) { }
  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%; } @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%; } }
  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) { .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%; } }