Saturday, June 22, 2024
HomejQueryDetect Bootstrap Breakpoints And Run Conditional Features

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.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments