Detect Bootstrap Breakpoints And Run Conditional Features

if-breakpoint.js is a brilliant tiny jQuery plugin to execute conditional capabilities tailor-made to particular display sizes.

It intelligently detects Bootstrap breakpoints and triggers actions accordingly, which lets you improve your UI with performance focused for every viewport measurement.

Use instances:

• Dynamic content material supply primarily based on the display measurement.
• Responsive navigation menus.
• Adaptive layouts.
• Gadget-specific performance.
• As a JavaScript-based different to CSS media queries.

Learn how to use it:

1. Select the suitable JS file primarily based on the Bootstrap model in your challenge.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Bootstrap 5 -->
<script src="/path/to/if-b3-breakpoint.min.js"></script>

<!-- Bootstrap 4 -->
<script src="/path/to/if-b4-breakpoint.min.js"></script>

<!-- Bootstrap 3 -->
<script src="/path/to/if-b4-breakpoint.min.js"></script>

2. Execute the suitable operate primarily based on the present viewport measurement.

if ( xs == true ) { 
  // do one thing
};

if ( sm == true ) { 
  // do one thing
};

if ( md == true ) { 
  // do one thing
};

if ( lg == true ) { 
  // do one thing
};

if ( xl == true ) { 
  // do one thing
};

if ( xxl == true ) { 
  // do one thing
  // Bootstrap 5 solely
};

This superior jQuery plugin is developed by JacobLett. For extra Superior Usages, please examine the demo web page or go to the official web site.