Easy way to see the Bootstrap grid?

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 sha

Answer 1

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 = $('
');
      overlay.height(docHeight)
          .css({
           "opacity" : 0.4,
           "position": "absolute",
           "top": 0,
           "left": 0,
           "width": "100%",
           "z-index": 5000
          })          
          .append('
')
          .click(function(){ $(this).remove(); })
          .find('.row').append(columns);
   $("body").append(overlay);
   $("#overlay .span1").css({
       "opacity" : 0.4,
       "background-color": "red"
    }).height(docHeight);
}