Create Responsive Tabs using Bootstrap (They should get stacked automatically on smaller screens)

Question

How can I create responsive tabs which get stacked automatically using bootstrap. The code for my navs is -

Answer 1

If you are using SCSS or LESS support, you should use the proper media query vars:

In SCSS:

  @media (max-width: $screen-md-min) {
    .nav-tabs > li {
      float:none;
    }
  }

In Less:

  @media (max-width: @screen-md-min) {
    .nav-tabs > li {
      float:none;
    }
  }

Check http://getbootstrap.com/css/ for details regarding the possible vars.