Responsive Bootstrap Toolkit provides an easy way of breakpoint detection in JavaScript, detecting changes in currently active breakpoint, as well as executing any breakpoint-specific JavaScript code.
A Pen by Maciej Gurban on CodePen.
Created
August 23, 2020 16:48
-
-
Save INDIAN2020/3054a429ee0614d88596567d2c450822 to your computer and use it in GitHub Desktop.
How to detect breakpoints in Bootstrap using JavaScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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"> | |
| <title>Responsive Bootstrap Toolkit</title> | |
| <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> | |
| <!-- Include default Bootstrap stylesheet --> | |
| <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <div class="site-topbar clearfix" data-compact-height="40" data-fullsize-height="60"> | |
| <h5 class="text-uppercase">Responsive Bootstrap Toolkit</h5> | |
| <div class="breakpoint-alias pull-right text-center"></div> | |
| </div> | |
| <div class="container-fluid"> | |
| <div class="row"> | |
| <div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 col-sm-push-2 col-md-push-3 col-lg-push-3"> | |
| <br/> | |
| <br/> | |
| <p>Boxes below get highlighted whenever current viewport matches their expression. Alias of current breakpoint is visible in the top right corner.</p> | |
| <br/> | |
| <div class="comparison-boxes"> | |
| <div class="comparison-operator box-1"> | |
| <=sm | |
| </div> | |
| <div class="comparison-operator box-2"> | |
| md | |
| </div> | |
| <div class="comparison-operator box-3"> | |
| >md | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
| <script src="https://rawgit.com/maciej-gurban/responsive-bootstrap-toolkit/master/dist/bootstrap-toolkit.min.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function($, document, window, viewport){ | |
| var highlightBox = function( className ) { | |
| $(className).addClass('active'); | |
| } | |
| var highlightBoxes = function() { | |
| $('.comparison-operator').removeClass('active'); | |
| if( viewport.is("<=sm") ) { | |
| highlightBox('.box-1'); | |
| } | |
| if( viewport.is("md") ) { | |
| highlightBox('.box-2'); | |
| } | |
| if( viewport.is(">md") ) { | |
| highlightBox('.box-3'); | |
| } | |
| } | |
| // Executes once whole document has been loaded | |
| $(document).ready(function() { | |
| highlightBoxes(); | |
| console.log('Current breakpoint:', viewport.current()); | |
| }); | |
| $(window).resize( | |
| viewport.changed(function(){ | |
| highlightBoxes(); | |
| console.log('Current breakpoint:', viewport.current()); | |
| }) | |
| ); | |
| })(jQuery, document, window, ResponsiveBootstrapToolkit); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * None of the CSS in this example is necessary for the base script to work properly. The only required CSS is the one shipped with Bootstrap. | |
| */ | |
| /* This example's styling */ | |
| @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"; | |
| } | |
| } | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| @media (max-width: 767px) { | |
| h1 { | |
| font-size: 20px; | |
| } | |
| } | |
| @media (min-width: 768px) and (max-width: 983px) { | |
| h1 { | |
| font-size: 24px; | |
| } | |
| } | |
| @media (min-width: 984px) and (max-width: 1199px) { | |
| h1 { | |
| font-size: 24px; | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| h1 { | |
| font-size: 30px; | |
| } | |
| } | |
| .wrapper { | |
| background: white; | |
| color: #666666; | |
| } | |
| .wrapper .site-topbar { | |
| height: 60px; | |
| line-height: 60px; | |
| vertical-align: middle; | |
| background: #414141; | |
| color: white; | |
| position: relative; | |
| vertical-align: middle; | |
| } | |
| .wrapper .site-topbar h5 { | |
| height: inherit; | |
| line-height: inherit; | |
| vertical-align: middle; | |
| font-weight: 300; | |
| margin: 0 60px 0 15px; | |
| vertical-align: middle; | |
| } | |
| .wrapper .site-topbar .breakpoint-alias { | |
| background-color: #238cce; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| right: 0; | |
| width: 60px; | |
| margin: auto; | |
| } | |
| .comparison-boxes { | |
| text-align: justify; | |
| font-size: 0.1px; | |
| } | |
| .comparison-boxes:after { | |
| content: ''; | |
| display: inline-block; | |
| width: 100%; | |
| } | |
| .comparison-operator { | |
| height: 140px; | |
| line-height: 140px; | |
| vertical-align: middle; | |
| display: inline-block; | |
| background: #414141; | |
| color: white; | |
| font-size: 25px; | |
| text-align: center; | |
| width: 33%; | |
| min-height: 50%; | |
| } | |
| .comparison-operator.active { | |
| background: #238cce; | |
| } | |
| .text-uppercase { | |
| text-transform: uppercase; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment