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

The other solutions here still leave much to be desired, in my opinion. Here is a solution that builds on the earlier solutions but uses CSS flexbox. The tabs stay side by side when possible, wrap to multiple lines only when needed, and still fill the width of the screen, with the horizontal space distributed evenly. It looks clean and balanced, and scales well to handle longer tabs or larger numbers of tabs. It also resolves some border and border-radius issues of the other solutions.

SCSS:

@media (max-width: $screen-xs-max) {
  .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    padding-right: 1px;
    > li {
      flex: auto;
      text-align: center;
      border: 1px solid $nav-tabs-border-color;
      margin-right: -1px;
      > a {
        margin: 0;
      }
      &.active {
        background: $gray-lighter;
        > a, > a:hover, > a:focus {
          border: none;
          background: none;
        }
      }
    }
  }
}

Or, plain CSS:

@media (max-width: 767px) {
  .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    padding-right: 1px;
  }
  .nav-tabs > li {
    flex: auto;
    text-align: center;
    border: 1px solid #ffffd;
    margin-right: -1px;
  }
  .nav-tabs > li > a {
    margin: 0;
  }
  .nav-tabs > li.active {
    background: #eee;
  }
  .nav-tabs > li.active > a,
  .nav-tabs > li.active > a:hover,
  .nav-tabs > li.active > a:focus {
    border: none;
    background: none;
  }
}