Easy way to see the Bootstrap grid?
You can use some CSS with the background
to see the grid :
[class*="span"] { background: #EEF; }
[class*="span"] [class*="span"] { background: #FEE; }
Demo 1 (jsfiddle)
As suggested by Pavlo, you can also use a semi-transparent color which would give you different shades depending on the nesting (rgba
browser support) :
[class^="span"] { background-color: rgba(255, 0, 0, 0.3); }
Demo 2 (jsfiddle)
The same goes with .row
or any element of the grid.
Note: the choice between *=
or ^=
doesn't really matter in this case, see this (w3.org) for more info
Updated Sherbrow's answer for Bootstrap 3:
div[class="row"] {
outline: 1px dotted rgba(0, 0, 0, 0.25);
}
div[class^="col-"] {
background-color: rgba(255, 0, 0, 0.2);
outline: 1px dotted rgba(0, 0, 0, 0.5);
}