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.

#breakpoint-helper {
	display: block;
	position: fixed;
	z-index: 10;

<div id="breakpoint-helper">
	<div class="visible-xs"><span class="badge">Extra small</span></div>
	<div class="visible-sm"><span class="badge">Small</span></div>
	<div class="visible-md"><span class="badge">Medium</span></div>
	<div class="visible-lg"><span class="badge">Large</span></div>

Luke Arentz

Luke is a senior software developer with over 8 years of experience. Currently specialising in .NET technologies, specifically Sitecore Experience Management and Sitecore Commerce.

Melbourne, Australia