Detect Bootstrap Breakpoints And Run Conditional Functions

if-breakpoint.js is a super tiny jQuery plugin to execute conditional functions tailored to specific screen sizes.

It intelligently detects Bootstrap breakpoints and triggers actions accordingly, which allows you to enhance your UI with functionality targeted for each viewport size.

Use cases:

• Dynamic content delivery based on the screen size.
• Responsive navigation menus.
• Adaptive layouts.
• Device-specific functionality.
• As a JavaScript-based alternative to CSS media queries.

How to use it:

1. Choose the appropriate JS file based on the Bootstrap version in your project.

<!-- 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 appropriate function based on the current viewport size.

if ( xs == true ) { 
  // do something
};

if ( sm == true ) { 
  // do something
};

if ( md == true ) { 
  // do something
};

if ( lg == true ) { 
  // do something
};

if ( xl == true ) { 
  // do something
};

if ( xxl == true ) { 
  // do something
  // Bootstrap 5 only
};

---

This awesome jQuery plugin is developed by JacobLett. For more Advanced Usages, please check the demo page or visit the official website.