Bootstrap CSS Breakpoint Debugger (CSS snippet for development)

[coliff]

When working on Bootstrap projects I often find myself wanting to quickly see the current Bootstrap CSS breakpoint (XS, SM, MD, LG, XL or XXL).

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. Works in both light and dark mode too.

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

You can view a demo at: https://code.christianoliff.com/bootstrap-css-breakpoint-debugger/
(observe the indicator at bottom left, you can resize the iframe (there is a drag handle in bottom right).

If do use it development, just make sure you don't push it to your production site accidentally. :-)