Detect Current Bootstrap 4 Breakpoint in JavaScript

bootstrap-detect-breakpoint is the current Bootstrap 4 breakpoint detection in JavaScript that detects BS4 breakpoints and returns an object containing the current breakpoint name (xl, lg, md, sm, xs) and index ( 0-4).

bootstrap 4 javascript breakpoints, javascript detect breakpoint, javascript detect screen size responsive, bootstrap breakpoints, bootstrap detect screen size

How to make use of it:

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

<!-- Bootstrap 4 Stylesheet -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<!-- Bootstrap 4 JavaScript -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- bootstrap-detect-breakpoint.js -->
<script src="src/bootstrap-detect-breakpoint.js"></script>

2. Or load the JavaScript 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 present breakpoint title & index.

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

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

Bootstrap 4 Breakpoints Detection, bootstrap-detect-breakpoint Plugin/Github, breakpoints js, css breakpoints in javascript, responsive bootstrap toolkit