Easy way to see the Bootstrap grid?

Question

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);
}

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

If you are using Firefox, Chrome, Safari, or another webkit browser, go to the page below and "install" the bookmarklet by dragging it to your bookmarks.

Then you can view the grid for any page using foundation or bootstrap by clicking the bookmarklet and choose the framework.

http://alefeuvre.github.io/foundation-grid-displayer/

If you are using Chrome, you can try this extension Bootstrap Grid Overlay

I have used it with bootstrap v4, working fine with showing the columns.

I use some simple jQuery/javascript function from console if I need. It only works with a 12 grid, but you'll be smart. You may not close the overlay or click links. Just reload the page.

function bootstrap_overlay() {

  var docHeight = $(document).height();
  var grid = 12, 
  columns = document.createDocumentFragment(), 
  div = document.createElement('div');

  div.className ='span1';
  while (grid--) {
    columns.appendChild(div.cloneNode(true));
  }
  var overlay = $('<div id="overlay"></div>');
      overlay.height(docHeight)
          .css({
           "opacity" : 0.4,
           "position": "absolute",
           "top": 0,
           "left": 0,
           "width": "100%",
           "z-index": 5000
          })          
          .append('<div class="container"><div class="row"></div></div>')
          .click(function(){ $(this).remove(); })
          .find('.row').append(columns);
   $("body").append(overlay);
   $("#overlay .span1").css({
       "opacity" : 0.4,
       "background-color": "red"
    }).height(docHeight);
}

Since different containers on the same page can have different columns, a solution will have to support visualizing this. Just displaying a colored overlay is not that visually apparent. One easy solution is to just add temporary column elements at the top of each section that you want to visualize, such as the following snippet:

<div class='col-xs-1 alert alert-info'>1</div>
<div class='col-xs-1 alert alert-success'>2</div>
<div class='col-xs-1 alert alert-warning'>3</div>
<div class='col-xs-1 alert alert-danger'>4</div>
<div class='col-xs-1 alert alert-info'>5</div>
<div class='col-xs-1 alert alert-success'>6</div>
<div class='col-xs-1 alert alert-warning'>7</div>
<div class='col-xs-1 alert alert-danger'>8</div>
<div class='col-xs-1 alert alert-info'>9</div>
<div class='col-xs-1 alert alert-success'>10</div>
<div class='col-xs-1 alert alert-warning'>11</div>
<div class='col-xs-1 alert alert-danger'>12</div>

Demo: https://jsfiddle.net/7zea43o8/7/