Bootstrap 5 CSS Breakpoint Indicator
Posted
on
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
The preview above shows the indicator for its own width, so resize your browser window to see it change. You can also view an isolated demo of the Bootstrap 5 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;
}