jQuery Visual Bootstrap grid

Visualise your Bootstrap (version 3 or 4) grid

Video demonstration on YouTube of the script working

Script work on the CodePen

Installation

Insert this code after the connected jQuery

<script src="path-to-file/jQuery.vbgp.js"></script>

Settings

numCols - number of columns in your theme (default 12)

bootstrapVersion - version of Bootstrap 3 or 4 (default 4)

Use

For enable Visual Bootstrap grid move the cursor to the upper right corner and select "Grid" checkbox. Or use hotKeys.

HotKeys

CTRL+; - show/hide grid

CTRL+' - show/hide padding fill

CTRL+[ - grayscale/color grid

CTRL+] - show/hide num of cols