Bootstrap 4 Breakpoints Detection In JavaScript

A super tiny script that detects Bootstrap 4 breakpoints and returns an object containing the current breakpoint name ("xl", "lg", "md", "sm", "xs) and index (0-4).

See Also:

• Detect Bootstrap 4 Breakpoints Using JavaScript - bs-breakpoints

How to use it:

1. Download and load the bootstrap-detect-breakpoint.js script in your Bootstrap project.

<!-- Bootstrap 4 Stylesheet -->
<link rel="stylesheet" 
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
      crossorigin="anonymous" />
<!-- Bootstrap 4 JavaScript -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" 
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
        crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" 
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" 
        crossorigin="anonymous">
</script>
<!-- bootstrap-detect-breakpoint.js -->
<script src="src/bootstrap-detect-breakpoint.js"></script>

2. Or from a CDN.

<!-- jsdelivr CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-detect-breakpoint/src/bootstrap-detect-breakpoint.js"></script>
<!-- unpkg CDN -->
<script src="https://unpkg.com/bootstrap-detect-breakpoint/src/bootstrap-detect-breakpoint.js"></script>

3. Output the current breakpoint name & index.

// Vanilla JS
document.addEventListener('DOMContentLoaded', function () {
  console.log(DetectBreakpoint.current())
});

// With jQuery
$(document).ready(function () {
  console.log(DetectBreakpoint.current())
});

// output
{
  name: "xl", 
  index: 4
}

---

This awesome jQuery plugin is developed by shaack. For more Advanced Usages, please check the demo page or visit the official website.