Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Pen by Maciej Gurban.

How to detect breakpoints in Bootstrap using JavaScript

A simple way of detecting changes in currently active breakpoint, as well as executing breakpoint-specific JavaScript code.

A Pen by Maciej Gurban on CodePen.

License.

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content=="IE=edge"/>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>How to detect breakpoints in Twitter Bootstrap using JavaScript (and execute custom code whenever active breakpoint changes)</title>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="example-wrapper">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h4><strong>How to detect breakpoints in Twitter Bootstrap using JavaScript </strong></h4>
(and execute custom code whenever active breakpoint changes)<br/><br/>
<p>In this example <em>active breakpoint</em> box will increase its width using JavaScript function whenever the smallest (xs) breakpoint is detected.</p>
<p>Resize your browser's width to see it working</p>
<p>Active breakpoint: <div class="breakpoint-alias"></div></p>
</div>
</div>
</div>
<!-- mandatory -->
<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>
<!-- end mandatory -->
</div>
</body>
</html>
(function($){
/*
* A lightweight window resize listener
*/
var waitForFinalEvent = function(){var b={};return function(c,d,a){a||(a="I'm a banana!");b[a]&&clearTimeout(b[a]);b[a]=setTimeout(c,d)}}();
/*
* @returns
* true - if page is currently using the breakpoint specified as argument
* false - if otherwise
*/
function isBreakpoint( alias ) {
return $('.device-' + alias).is(':visible');
}
/*
* Main window resize listener
* Executes each time window has been resized
*/
$(window).resize(function () {
waitForFinalEvent(function(){
if (isBreakpoint('xs')) {
$('.breakpoint-alias').animate({'width': '150px'}, 300);
} else {
$('.breakpoint-alias').animate({'width': '50px'}, 300);
}
}, 300, new Date().getTime())
});
})(jQuery);
/*
* None of the CSS in this example is necessary for the script to work properly. The only required CSS is the one shipped with Bootstrap.
*/
/* This example's styling */
.breakpoint-alias {
display: inline-block;
padding: 6px 12px;
color: #fff;
background-color: #238cce;
width: 50px;
text-align: center;
}
h4 {
margin-bottom: 0!important;
}
@media (max-width: 767px) {
.breakpoint-alias:before {
content: 'XS ';
}
}
@media (min-width: 768px) and (max-width: 983px) {
.breakpoint-alias:before {
content: 'SM ';
}
}
@media (min-width: 984px) and (max-width: 1199px) {
.breakpoint-alias:before {
content: 'MD ';
}
}
@media (min-width: 1200px) {
.breakpoint-alias:before {
content: 'LG ';
}
}
@leolux

This comment has been minimized.

Copy link

leolux commented Aug 17, 2015

Why do we need this akward looking window resize listener?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment