Bootstrap CSS Breakpoint Indicator
Posted
on
Contents
When working on Bootstrap projects I often find myself wanting to quickly see the current CSS breakpoint. I created a simple CSS snippet that shows the current Bootstrap CSS breakpoint in the browser’s viewport.
It appears at all times in the bottom left corner of the viewport and as it’s small, partially transparent and blurred it doesn’t distract from the main content.
body::after {
aspect-ratio: 1 / 1 !important;
backdrop-filter: blur(99px) !important;
background-color: rgb(0 0 0 / 0.8) !important;
border-radius: 8px !important;
bottom: 0.25rem !important;
color: #fff !important;
content: "XS";
font-family: system-ui, sans-serif !important;
font-size: 12px !important;
left: 0.25rem !important;
min-width: 28px !important;
opacity: 0.9 !important;
padding: 4px !important;
pointer-events: none !important;
position: fixed !important;
text-align: center !important;
z-index: 9999 !important;
}
/* SM ≥576px */
@media (width >= 576px) {
body::after {
content: "SM";
}
}
/* MD ≥768px */
@media (width >= 768px) {
body::after {
content: "MD";
}
}
/* LG ≥992px */
@media (width >= 992px) {
body::after {
content: "LG";
}
}
/* XL ≥1200px */
@media (width >= 1200px) {
body::after {
content: "XL";
}
}
/* XXL ≥1400px */
@media (width >= 1400px) {
body::after {
content: "XXL";
}
}
Demo
You can see a demo on this page or view an isolate demo of the Bootstrap CSS Breakpoint Debugger.
Tip: You can set the indicator to be hidden when using/interacting with the site with:
body:hover::after {
opacity: 0 !important;
}