Question

I am playing with a simple HTML page using Bootstrap and I would love to have a way to visualize the columns, as in see them “underneath” the actual content as a different shade for example, something like the one at Frameless. Is there a way to get that functionality easy?

Answer 1

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