Responsive tabs

Change bootstrap tabs to stacked pills when screen is xs.

by M Greene

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/maciej-gurban/responsive-bootstrap-toolkit/master/dist/bootstrap-toolkit.min.js"></script>
<div class="container">
  <ul id="myTabs" class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li role="presentation" class=""><a href="#">sub1</a></li>
      <li role="presentation" class=""><a href="#">sub2</a></li>
    </ul>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

<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>
</div>

JavaScript

(function($, viewport){

    // Executes only in XS breakpoint
    if( viewport.is('xs') ) {
        // ...
    }

    // Executes in SM, MD and LG breakpoints
    if( viewport.is('>=sm') ) {
        // ...
    }

    // Executes in XS and SM breakpoints
    if( viewport.is('<md') ) {
        // ...
    }

    // Execute only after document has fully loaded
    $(document).ready(function() {
        if( viewport.is('xs') ) {
            // ...
        }
    });

    // Execute code each time window size changes
    $(window).resize(
        viewport.changed(function() {
        		var mytabs = $("#myTabs");
            if( viewport.is('xs') ) {
                mytabs.removeClass('nav-tabs');
                mytabs.addClass('nav-pills nav-stacked');
            }
            else {
            		mytabs.addClass('nav-tabs');
                mytabs.removeClass('nav-pills nav-stacked');
            }
        })
    ); 

})(jQuery, ResponsiveBootstrapToolkit);