Viewport and Breakpoint Detection

Detecting Breakpoints

Detect the current Bootstrap/CSS breakpoint in jQuery by reading CSS variable or element visibility — avoid hard-coding pixel values.

Example

// Method 1: hidden breakpoint indicator in HTML (reliable)
// Add: <div id="bp" class="d-none d-sm-block d-md-none"></div>
function getBreakpoint() {
  const el = document.createElement("div");
  el.className = "d-block d-sm-none"; document.body.appendChild(el);
  const isMobile = getComputedStyle(el).display === "block";
  el.remove(); return isMobile ? "xs" : "sm+";
}
// Method 2: matchMedia (recommended for modern code)
const isMd = window.matchMedia("(min-width: 768px)").matches;
$(window).on("resize", $.throttle(200, () => { /* recheck */ }));

JAVASCRIPT

Full Editor

Pro Tip

matchMedia is synchronous and does not require DOM tricks — prefer it for breakpoint detection.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned