Reading · Christian Oliff

Posted on Dec 17, 2025

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 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;
}

Bootstrap 5 CSS Breakpoint Indicator

Demo

Comments