Twitter Bootstrap 3.0 - difference between nesting

Question

Using Bootstrap 3.0, what is the difference between -

<div class="col-xs-12">
   <div class="col-xs-10"></div>
</div>

AND

<div class="col-xs-10">
   <div class="col-xs-12"></div>
</div>

In terms of whether the inner div has the same width (including margin and padding)? If no, what's the difference? Any resources where I can understand this better?

Answer 1

The outer element sets the constraining dimension for the inner element, you can see this in effect if you simply do:

Demo Fiddle

HTML

<div class="col-xs-10">
    <div class="col-xs-12"></div>
</div>
<div class="col-xs-12">
    <div class="col-xs-10"></div>
</div>

CSS

div {
    height:20px;
}
.col-xs-12 {
    border:1px solid red;
}
.col-xs-10 {
    border:1px solid blue;
}

With that in mind, the Bootstrap grid system uses media queries based on pixel amounts to set the behaviour of columns at distinct intervals (e.g. xs) as such, elements should be nested in decending order of width out of 12 (the maximum amount) in order for a layout to respond as anticipated to screen size.