I went through this yesterday, myself. The documentation is clear about a few things:
- All bootstrap should semantically exist inside of a div class=“container” or class=“container-fluid”.
- Within that container, must exist div class=“row” (even if there’s not going to be horizontally aligned elements). There is usually multiple class=“rows” on a page, because…
- Within each ROW gows a COLUMN. Row being the horizontal axis, column, of course, being vertical.
So you’ve got this three-layer nesting that is semantically required by bootstrap.
In any given row, there are columns spanning 12 units.
The minimum you have to write is col-xs-12. Why?
Because bootstrap is mobile first. If you specify that, on the smallest possible screen (which is what the xs stands for) that it is a 12-unit spread, it will default on up to being a 12-unit spread on big windows, too.
But if you want to start utilizing breakpoints for differently sized screens, you have to start specifying the various size. col-sm, col-md, etc.
Let’s exemplify this with the code written on the fCC tribute page…
div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2"
There are two significant things going on here:
- We’re seeing different sizes specified for each screen size
- The introduction of OFFSET, which is key for bigger screens
If I want the content within my Jumbotron centered on a medium sized screen (and every screen larger than medium), then I have to specify how many columns I want left out on either side.
class=“col-md-8” must be followed by col-md-offset-2, because 2 colums left out on either side of the 8 centered columns, equals 12 total columns.
So basically the offset feature is a way of centering your content.
If this did not make sense, please let me know! This is my first attempt at such an explanation.