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

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.

Answer 2

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

Answer 3

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/

Answer 4

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

Answer 5

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/

Answer 6

Bootstrap 3 has different class names (span* > col-*-*), and uses padding to create the gutter (spacing) between columns so simply putting a background-color in the columns won't show the gutter.

For Bootstrap 3, you can add background-clip: content-box to only show the background color within the content area...

 .row [class*='col-'] {
      background-color: #ffeeee;
      background-clip: content-box;
      min-height: 20px;
}

http://codeply.com/go/pejyqLlrBF