Visualise your bootstrap (ver. 3 or 4) grid
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
old
.gitattributes
README.md
README_RUS.md
jQuery.vbgp.js

README.md

jQuery Visual Bootstrap grid

Visualise your Bootstrap (version 3 or 4) grid

jQuery Visual Bootstrap 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.

Show/Hide Bootstrap grid

HotKeys

CTRL+; - show/hide grid

CTRL+' - show/hide padding fill

CTRL+[ - grayscale/color grid

CTRL+] - show/hide num of cols