Bootstrap Breakpoint Helper

The grid breakpoints are probably the most powerful and useful feature of Bootstrap, our developers base all layout around them, but sometimes it’s tricky to know which breakpoint is being used while debugging UI issues.

So, we created a simple Q module, which when enabled ( this one cannot be enabled on production applications, via checks for the global debug constant ) – which does a few simple things:

• Show the current breakpoint on page load – using the handle ( xl, sm, md, lg, xl )
• Also show the current device viewport width and height
• On resize, track the current Bootstrap breakpoint and viewport width / height
• On click, apply a simple css universal selector to apply borders around all elements, so that we can see how things align and – most helpfully, locate rules on elements which might cause unwanted horizontal scroll bars.

You can see a working example on CodePen and below is a simplified gist of the module class in a stand-alone html doc, taken from the Q Plugin, feel free to use and modify this script, like all software we release publicly, this is available under MIT license.

Notes:

• Elements with the class nodebug will not have the debug borders added, thanks to the use of the :not negative selector
• You can see the class in situ inside the Q Plugin here
• The Bootstrap breakpoint detection script came from here