Visually representing Bootstrap breakpoints

When working with Bootstrap it can sometimes be difficult to determine the active breakpoints for a given screen width.

The simplest solution is to add a breakpoint helper to your document and configure it using the standard Bootstrap visibility classes. The example below uses the badge class, however any visual cue will suffice.

Once you add the following CSS and HTML to your document, you will notice the rounded badge icon appear in the top left corner, which indicates the active breakpoint.