Update: I created a small jQuery plugin that adds media query detection for Bootstrap 3 and 4 projects. You can learn more about IfBreakpoint.js here.

Have you ever wanted to trigger some javascript at a certain media query value? Relying on document.width() has problems because it includes browser scrollbars. A simpler and more accurate solution is to rely on CSS to trigger the javascript.

Bootstrap 3 has some nice responsive visibility classes that are triggered at the various breakpoints. What we will do is add a series of span tags with these classes and check when they are set to display block. Since they are inline by default, we will know media query breakpoint fired when the CSS display property changes.

View Demo

Adds some invisible span elements to trigger Bootstrap CSS media queries

$( "body" ).append( "" ); 1 2 3 $ ( "body" ) . append ( "" ) ;

Write a function to check if an element is set to display block

// Checks if the span is set to display block via CSS function checkIfBlock (target) { var target = $(target).css('display') == 'block'; return target; } 1 2 3 4 5 6 7 // Checks if the span is set to display block via CSS function checkIfBlock ( target ) { var target = $ ( target ) . css ( 'display' ) == 'block' ; return target ; }

Set some variables to use with the if conditional statements below

// Set some variables to use with the if checks below var mediaQueryXs = checkIfBlock('.viewport-check .visible-xs-block'); var mediaQuerySm = checkIfBlock('.viewport-check .visible-sm-block'); var mediaQueryMd = checkIfBlock('.viewport-check .visible-md-block'); var mediaQueryLg = checkIfBlock('.viewport-check .visible-lg-block'); 1 2 3 4 5 6 7 // Set some variables to use with the if checks below var mediaQueryXs = checkIfBlock ( '.viewport-check .visible-xs-block' ) ; var mediaQuerySm = checkIfBlock ( '.viewport-check .visible-sm-block' ) ; var mediaQueryMd = checkIfBlock ( '.viewport-check .visible-md-block' ) ; var mediaQueryLg = checkIfBlock ( '.viewport-check .visible-lg-block' ) ;

Now write a series of if condition statements to check if they are true/false

// Now check if the media query is enabled then add a unique class to the body tag // Are you extra-small? if ( mediaQueryXs == true ) { $("body").toggleClass( "media-query-xs" ); $("h2").text( "media-query-xs" ); } // Are you small? if ( mediaQuerySm == true ) { $("body").toggleClass( "media-query-sm" ); $("h2").text( "media-query-sm" ); } // Are you medium? if ( mediaQueryMd == true ) { $("body").toggleClass( "media-query-md" ); $("h2").text( "media-query-md" ); } // Are you large? if ( mediaQueryLg == true ) { $("body").toggleClass( "media-query-lg" ); $("h2").text( "media-query-lg" ); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 // Now check if the media query is enabled then add a unique class to the body tag // Are you extra-small? if ( mediaQueryXs == true ) { $ ( "body" ) . toggleClass ( "media-query-xs" ) ; $ ( "h2" ) . text ( "media-query-xs" ) ; } // Are you small? if ( mediaQuerySm == true ) { $ ( "body" ) . toggleClass ( "media-query-sm" ) ; $ ( "h2" ) . text ( "media-query-sm" ) ; } // Are you medium? if ( mediaQueryMd == true ) { $ ( "body" ) . toggleClass ( "media-query-md" ) ; $ ( "h2" ) . text ( "media-query-md" ) ; } // Are you large? if ( mediaQueryLg == true ) { $ ( "body" ) . toggleClass ( "media-query-lg" ) ; $ ( "h2" ) . text ( "media-query-lg" ) ; }

Below is the completed script

See the Pen How to detect when media queries are fired in Bootstrap 3 by Jacob Lett (@JacobLett) on CodePen.



Works cited

http://stackoverflow.com/questions/20181219/twitter-bootstrap-how-to-detect-when-media-queries-starts

http://jsfiddle.net/ejVvu/1/