Do nested Bootstrap 3 rows need to be within a col-sm-*? - css

Question

Do nested Bootstrap 3 rows need to be within a col-sm-* or can they also be nested within a col-md-, col-xs-, etc?
The documentation says col-sm-* but it doesn't appear to be explicit about whether nesting within other col sizes is forbidden.
http://getbootstrap.com/css/#grid-nesting

Answer 1

The col-sm-*you're referring to is just an example. It should really be col-*-* (xs, sm, md, lg).
Have a look just further down where the describe pushing and pulling with .col-md-push-* and .col-md-pull-*. Once again it's just an example, any column can be pushed and pulled.
Furthermore, a nested row doesn't necessarily need to be directly within the parent column. The important thing to remember is that every row is directly followed by a column, but nested rows can be wrapped with any element.
Examples:
<div class="row">
<div class="col-xs-12">OK</div>
</div>
<div class="row">
<div class="foo">
<div class="col-xs-12">NOT OK</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">OK</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="foo">
<div class="row">
<div class="col-xs-6">OK</div>
</div>
</div>
</div>
</div>

Answer 2

You can use all class in the same time. On this base bootstrap decide which one is the best for screen.
You can nasted class inside all of types - it's depend what you need.

Answer 3

In TWBS3 the .col-xx-x classes only set width in terms of percentage, e.g. .col-sm-4 { width: 25% }, .col-md-4 { width: 25% } and .col-md-4 { width: 25% }.
Yes all the same, so you only need to define one.
But then why have all the variants? Two reasons:
It's because you may want to have the columns render different widths at different resolutions, e.g. .col-sm-4 .col-md-3 will render 1/4 width in small screen, but as 1/3 in medium, large and x-large screens.
The column will render down to it's 'mobile first' variant once the screen resolution falls below the chosen width. i.e. .col-sm-4 will render ¼ width in small, medium, lg, xl screens, but render full width at xs screens. Similarly, using only .col-md-4 with render 1/4 in md, lg & xl screens, but full width in sm & xs. Therefore, a class set like .col-sm-4 .col-md-4 is redundant.
So, with that knowledge - and in direct answer to your question: No, you only need one declaration, but be mindful of the size you select, as, when in smaller than your choice, the column will render full width (width: 100%)