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=""></script>
<!-- unpkg CDN -->
<script src=""></script>

3. Output the present breakpoint title & index.

// Vanilla JS
document.addEventListener('DOMContentLoaded', function () {

// With jQuery
$(document).ready(function () {

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

See Demo And Download

Official Website(shaack): Click Here

This superior jQuery/javascript plugin is developed by shaack. For extra Advanced Usages, please go to the official website.

Related Posts


Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

Vanilla-js module for adding zoom and panning behavior when dragging to SVG embedded elements. A lightweight Vanilla JavaScript plugin that enables zoom and pan functions on an…


Sorting HTML Table Vanilla JavaScript Library | Sortable.js

Sortable – Small JS vanilla table sorter makes any table with class = “sortable“, er, sortable. That is, the user can click the table header and change…


WYSIWYG Rich Text Editor With jQuery And FontAwesome | RichText

RichText jQuery implementation for WYSIWYG Rich Text Editor which uses Font Awesome Iconic Font for editor icons. It is licensed under AGPL-3.0. Initialize editor Simply call .richText() on your jQuery(‘textarea’) or jQuery(‘input’)…


[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (,, etc.). This package is lightweight, flexible, compatible with libraries (jQuery,…


[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

squircley.js is the core magic of Squirclular ✨ from wrapped in a simple 0-dependency JavaScript library. squircley.js can generate SVG files, add square backgrounds to DOM…