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

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

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

I need them to get converted to stacked tabs when viewed on small screens.
Right now it just moves the tabs into multiple likes which looks ugly.
I want something like the navbar collapse but without the button to activate the collapse.

Solutions/Answers:

Solution 1:

This should work:

@media (max-width: 480px) { 
    .nav-tabs > li {
        float:none;
    }
}

Solution 2:

With BootStrap version 3, you have everything stacked in a clean vertical way for Extra Small Device by adding 4 CSS classes. BootStrap and Tab does not render greatly as you have noticed. The code below can do the job by removing all background and border.

@media (max-width: 767px) { 
    .nav-tabs > li {
        float:none;
        border:1px solid #dddddd;
    }
    .nav-tabs > li.active > a{
        border:none;
    }
    .nav > li > a:hover, .nav > li > a:focus,
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus
     {
        background:none;
        border:none;
    }
}

Solution 3:

If you find that 480 doesn’t do it (I have long tab titles), you can always change your max-width. I used:

@media (max-width: 991px) { 
 .nav-tabs > li {
    float:none;
 }
}

and it works like a charm.

Related:  Twitter Bootstrap: How to see the state of a toggle button?

Solution 4:

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.

Solution 5:

    @media (max-width: 480px) {
        .nav-tabs > li {
            float:none;
            margin-bottom: 0px;
        }
        .nav-tabs > li.active > a {
            border: 1px solid #dddddd;
        }
        .nav-tabs > li.active > a:hover {
            border: 1px solid #dddddd;
        }
        .nav-tabs > li  > a {
            border-bottom: 1px solid #dddddd;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
        }
        .nav-tabs > li > a:hover {
            border-color: #dddddd;
        }
    }

This one is more simple and good-looking.

Solution 6:

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.

Related:  Bootstrap 4 Collapsible Card - Choppy Animation

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 #ddd;
    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;
  }
}

References