What are the Bootstrap Breakpoints?

The new Bootstrap version 5 was officially released. Among some of the new features some of its breakpoints were changed. The breakpoints are pre-defined widths in Bootstrap that help identify the viewport size of the used device. These provide the backbone of the responsive layout in Bootstrap.

How to Find the Breakpoint Dynamically with JQuery?

Even though Bootstrap is awesome and will do the work for you 99.9% of the time in some special case you may need to enhance the elements with additional logic to suit your need. Whe this happens it is extremely handy to be able to quickly get the current breakpoint. This small JQuery snippet I have written will help you find out the current breakpoint.

/**
 * One of xs, sm, md, lg, xl. xxl
 * @returns {String}
 */
function findBreakpoint() {
    var width = $(window).width();
    if (width < 576) {
        return 'xs';
    } else if (width < 768) {
        return 'sm';
    } else if (width < 992) {
        return 'md';
    } else if (width < 1200) {
        return 'lg';
    } else if (width < 1400) {
        return 'xl';
    } else {
        return 'xxl';
    }
}

How to use it?

Here is a small example of how to print the current breakpoint in the console when the page have loaded.

$(function(){
    let breakpoint = findBreakpoint();
    console.log("Current breakpoint is: " + breakpoint );

    if (breakpoint == "xs") {
        $(".content").click(() => {
             openContentInExtraSmallView();
        });
    }
});