Ignoring the letters (xs, sm, md, lg) for now, I’ll start with just the numbers…
the numbers (1-12) represent a portion of the total width of any div all divs are divided into 12 columns
so, col--6 spans 6 of 12 columns (half the width), col--12 spans 12 of 12 columns (the entire width), etc
So, if you want two equal columns to span a div, write
<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>
Or, if you want three unequal columns to span that same width, you could write:
<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>
You’ll notice the # of columns always add up to 12. It can be less than twelve, but beware if more than 12, as your offending divs will bump down to the next row (not .row, which is another story altogether).
Similarly for the following line –
<div class="col-md-6 col-md-offset-3">
From the online version of the book-section 7.3 – The line creates a single column for medium screen, of width 6 (i.e. half of the total 12 given by bootstrap)
See – http://getbootstrap.com/examples/grid/ for the full list of col sizes
Explanation of
A) http://www.sitepoint.com/understanding-bootstrap-grid-system/ – “A row acts like a wrapper around the columns. The row nullifies the padding set by the container element by using a negative margin value of -15px on both the left and right sides. A row spans from the left edge to the right edge of the container element. It is created by adding the class “.row” to a block level element inside the container.”
Each set of nested divs also span up to 12 columns of their parent div. NOTE: Since each .col class has 15px padding on either side, you should usually wrap nested columns in a .row, which has -15px margins. This avoids duplicating the padding and keeps the content lined up between nested and non-nested col classes.
B) https://stackoverflow.com/questions/19138430/bootstrap-rows – very good explanation
Bootstrap flexbox is a utility for managing the position of the items in a container and to distribute space between them in a more efficient way.
d-flex just applies display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties. So compared to normal css its the shorter version of display="flex"
Use the .d-*-flex class in Bootstrap to set a flexbox container on a screen size as shown below:
<div class="d-flex bg-primary">d-flex</div>
<span class="d-sm-flex bg-warning">d-sm-flex</span>
<span class="d-md-flex bg-info">d-md-flex</span>
<span class="d-lg-flex bg-success">d-lg-flex</span>
Above the flex is set for different screen sizes, for example,
d-sm-flex = Flex for Small Screen Size d-md-flex = Flex for Medium Screen Size d-lg-flex = Flex for Large Screen Size d-xl-flex = Flex for Extra Large Screen Size
An example
<div
class="d-flex align-items-top justify-content-center flex-direction-column"
></div>
Further Reading
https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system
