Identifying active Bootstrap breakpoints with a simple visual helper

When working with Bootstrap, it is not always obvious which breakpoint is currently active for a given screen width.

A straightforward solution is to add a breakpoint helper directly to the page using Bootstrap’s standard visibility classes. The example below uses the badge class as a visual indicator, but any clearly visible element will work.

By including the following CSS and HTML in the page, a rounded badge icon appears in the top-left corner, displaying the active breakpoint.