Bootstrap 6 CSS Breakpoint Indicator
Posted
on
Following on from my post last year about Bootstrap 5 CSS Breakpoint Indicator, here’s a snippet for Bootstrap 6 (Alpha).
It appears at all times in the bottom left corner of the viewport and as it’s small, partially transparent so 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;
font-weight: normal !important;
left: 0.25rem !important;
line-height: 1 !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 >= 1024px) {
body::after {
content: "LG";
}
}
/* XL ≥1200px */
@media (width >= 1280px) {
body::after {
content: "XL";
}
}
/* XXL ≥1400px */
@media (width >= 1536px) {
body::after {
content: "2XL";
}
}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 6 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;
}