A simple jQuery plugin that draws grid columns to a twitter bootstrap enabled layout.
Switch branches/tags
Nothing to show
Clone or download
Latest commit c5502de Aug 20, 2014
Failed to load latest commit information.
src Update jqdrawbsgrid.js Feb 19, 2014
README.md Update README.md Aug 20, 2014



A simple jQuery plugin that draws grid columns to a twitter bootstrap layout. Working better with non fluid layouts (container-fluid, row fluid).


  • By default it automatically adds a "show/hide grid" button and a key listener on the key 'l' (a small L that is).
  • The preview grid also by default starts in hidden mode


The github pages feature a simple demo: http://plozi.github.com/jQDrawBootstrapGrid/example/ex.html


screenshot of the demo site


  • Twitter Bootstrap

  • JQuery > 1.7.*


After adding the javascript source to your document, apply the plugin to the bootstrap ".container":



The default settings are:

         'columns':12,                     //define how much columns to draw
         'singleColumnName': 'span1',     //the css class name which you want to add for one column
         'color':'lightgrey',              //each columns background color
         'opacity':0.3,                    //opacity of the rendered grid
         'buttonLabel': 'Show/Hide Grid',  //the label for the button
         'startHidden':true,               //if we want the grid to be shown initially
          'includeMargin': false,          //if we include the original columns left margin
         'hiddenClassName': 'hidden',      //the css class name used in your bootstrap to hide elements -> visibility: hidden
         'keybinding': 'l'                 //hide/show grid on pressing this key

Support and Contribution

This little project is highly encouraging YOU to work on it!

Have a question, or found an issue? Just create a issue: https://github.com/plozi/jQDrawBootstrapGrid/issues


Christian Polzer

Copyright and License

The jQDrawBootstrapGrid Plugin is licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) licenses.