[jquery] Make Bootstrap 3 Tabs Responsive

Currently, when you set up tabs in Bootstrap 3, the tabs are not responsive.

This:

Turns into this:

CSS. Fixing how it looks is easy, just removing the float, etc. at the max-width. However, the content is disjointed from the tab, so a stack of tabs will work like tabs but on smaller viewports you may or may not see the change in content.

This is the basic html for making a tabbed navigation:

      <!--begin tabs going in wide content -->
       <ul class="nav nav-tabs" id="maincontent" role="tablist">
          <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
          <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
          <li class="dropdown">
             <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
             <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                <li><a href="#dropdown1" tabindex="-1" role="tab" data-toggle="tab">@fat</a></li>
                <li><a href="#dropdown2" tabindex="-1" role="tab" data-toggle="tab">@mdo</a></li>
             </ul>
          </li>
       </ul><!--/.nav-tabs.content-tabs -->


       <div class="tab-content">

          <div class="tab-pane fade in active" id="home">
             <p>Home Content : ...</p>
          </div><!--/.tab-pane -->

          <div class="tab-pane fade" id="profile">
             <p>Profile Content : ...</p>
          </div><!--/.tab-pane -->

          <div class="tab-pane fade" id="dropdown1">
             <p>Dropdown1 - ...</p>
          </div><!--/.tab-pane -->

          <div class="tab-pane fade" id="dropdown2">
             <p>Dropdown 2 - ...</p>
          </div><!--/.tab-pane -->

       </div><!--/.tab-content -->

How do you turn the Tabs into the Accordion or Collapse so that it's small viewport friendly?

The solution is just 3 lines:

@media only screen and (max-width: 479px) {
   .nav-tabs > li {
      width: 100%;
   }
}

..but you have to accept the idea of tabs that wrap to more lines in other dimensions.

Of course you can achieve a horizontal scrolling area with white-space: nowrap trick but the scrollbars look ugly on desktops so you have to write js code and the whole thing starts becoming no trivial at all!

Pure CSS only for nav tabs, very simple for small screens:

@media (max-width: 767px) {
     .nav-tabs {
         min-width: 100%;
         display: inline-grid;
     }
}

There is a new one: http://hayatbiralem.com/blog/2015/05/15/responsive-bootstrap-tabs/

And also Codepen sample available here: http://codepen.io/hayatbiralem/pen/KpzjOL

No needs plugin. It uses just a little css and jquery.

Here's a sample tabs markup:

<ul class="nav nav-tabs nav-tabs-responsive">
    <li class="active">
        <a href="#tab1" data-toggle="tab">
            <span class="text">Tab 1</span>
        </a>
    </li>
    <li class="next">
        <a href="#tab2" data-toggle="tab">
            <span class="text">Tab 2</span>
        </a>
    </li>
    <li>
        <a href="#tab3" data-toggle="tab">
            <span class="text">Tab 3</span>
        </a>
    </li>
    ...
</ul>

.. and jQuery codes are also here:

(function($) {

  'use strict';

  $(document).on('show.bs.tab', '.nav-tabs-responsive [data-toggle="tab"]', function(e) {
    var $target = $(e.target);
    var $tabs = $target.closest('.nav-tabs-responsive');
    var $current = $target.closest('li');
    var $parent = $current.closest('li.dropdown');
        $current = $parent.length > 0 ? $parent : $current;
    var $next = $current.next();
    var $prev = $current.prev();
    var updateDropdownMenu = function($el, position){
      $el
        .find('.dropdown-menu')
        .removeClass('pull-xs-left pull-xs-center pull-xs-right')
        .addClass( 'pull-xs-' + position );
    };

    $tabs.find('>li').removeClass('next prev');
    $prev.addClass('prev');
    $next.addClass('next');

    updateDropdownMenu( $prev, 'left' );
    updateDropdownMenu( $current, 'center' );
    updateDropdownMenu( $next, 'right' );
  });

})(jQuery);

I prefer a css only scheme based on horizontal scroll, like tabs on android. This's my solution, just wrap with a class nav-tabs-responsive:

<div class="nav-tabs-responsive">
  <ul class="nav nav-tabs" role="tablist">
    <li>...</li>
  </ul>
</div>

And two css lines:

.nav-tabs { min-width: 600px; }
.nav-tabs-responsive { overflow: auto; }

600px is the point over you will be responsive (you can set it using bootstrap variables)

I have created a directive in agularJS supported with ng-bootStrap components

https://angular-ui.github.io/bootstrap/#!#tabs

here I share the code that I implemented

[https://jsfiddle.net/k1r02/u6gpv4dc/][1]

  [1]: https://jsfiddle.net/k1r02/u6gpv4dc/

Slack has a cool way of making tabs small viewport friendly on some of their admin pages. I made something similar using bootstrap. It's kind of a tabs ? dropdown.

Demo: http://jsbin.com/nowuyi/1

Here's what it looks like on a big viewport:

Here's how it looks collapsed on a small viewport:

Here's how it looks expanded on a small viewport:

the HTML is exactly the same as default bootstrap tabs.

There is a small JS snippet, which requires jquery (and inserts two span elements into the DOM):

$.fn.responsiveTabs = function() {
  this.addClass('responsive-tabs');
  this.append($('<span class="glyphicon glyphicon-triangle-bottom"></span>'));
  this.append($('<span class="glyphicon glyphicon-triangle-top"></span>'));

  this.on('click', 'li.active > a, span.glyphicon', function() {
    this.toggleClass('open');
  }.bind(this));

  this.on('click', 'li:not(.active) > a', function() {
    this.removeClass('open');
  }.bind(this));
};

$('.nav.nav-tabs').responsiveTabs();

And then there is a lot of css (less):

@xs: 768px;


.responsive-tabs.nav-tabs {
  position: relative;
  z-index: 10;
  height: 42px;
  overflow: visible;
  border-bottom: none;

  @media(min-width: @xs) {
    border-bottom: 1px solid #ddd;
  }

  span.glyphicon {
    position: absolute;
    top: 14px;
    right: 22px;
    &.glyphicon-triangle-top {
      display: none;
    }
    @media(min-width: @xs) {
      display: none;
    }
  }

  > li {
    display: none;
    float: none;
    text-align: center;

    &:last-of-type > a {
      margin-right: 0;
    }

    > a {
      margin-right: 0;
      background: #fff;
      border: 1px solid #DDDDDD;

      @media(min-width: @xs) {
        margin-right: 4px;
      }
    }

    &.active {
      display: block;
      a {
        @media(min-width: @xs) {
          border-bottom-color: transparent; 
        }
        border: 1px solid #DDDDDD;
        border-radius: 2px;
      }
    }

    @media(min-width: @xs) {
      display: block;
      float: left;
    }

  }

  &.open {

    span.glyphicon {
      &.glyphicon-triangle-top {
        display: block;
        @media(min-width: @xs) {
          display: none;
        }
      }
      &.glyphicon-triangle-bottom {
        display: none;
      }
    }

    > li {
      display: block;

      a {
        border-radius: 0;
      }

      &:first-of-type a {
        border-radius: 2px 2px 0 0;
      }
      &:last-of-type a {
        border-radius: 0 0 2px 2px;
      }
    }
  }
}