Full width tabs using Bootstrap (Support IE)

html css twitter-bootstrap tabs

74,087

Solution 1

Maybe I've found your solution:

Create that class with css:

.take-all-space-you-can{
    width:100%;
}

And then apply that class to your li tags into your ul. Doing these all the li takes the space that they can and automatically divide the space in the single row.

DEMO

Solution 2

Twitter Bootstrap 3 contains a class for this, the nav-justified class.

Use it like so:

<ul class="nav nav-tabs nav-justified">
    <li><a href="#">Foo</a></li>
    <li><a href="#">Bar</a></li>
</ul>

Solution 3

You can use javascript and jquery.

Building on Nick Bull's answer above, you can dynamically determine the number of tabs on the page using Jquery.

Try this on your html page.

<script type="text/javascript">
   $(document).ready(function() {
       var numTabs = $('.nav-tabs').find('li').length;
       var tabWidth = 100 / numTabs;
       var tabPercent = tabWidth + "%";
       $('.nav-tabs li').width(tabPercent);
   });
</script>

Solution 4

Bootstrap 4

It's now very simple to get full-width Tabs using the nav-fill class. This works on all modern browsers including IE 11.

To get full width tabs, use (sized by tab content):

  <ul id="myTabs" class="nav nav-tabs nav-fill">
      <li class="nav-item"><a href="#tab1" data-target="#tab1" data-toggle="tab" class="nav-link">Home</a></li>
      <li class="nav-item"><a href="#tab1" data-target="#tab2" data-toggle="tab" class="nav-link active">Profile</a></li>
      <li class="nav-item"><a href="#tab3" data-target="#tab3" data-toggle="tab" class="nav-link">Messages</a></li>
  </ul>

Demo

To get full equal width tabs, use nav-justified:

<ul class="nav nav-tabs nav-justified">
     <li class="nav-item">...</li>
</ul>

Solution 5

Try

.nav-tabs > li {
    float:none;
    display: table-cell;
    width: 1%;
}

View more solutions

74,087

Author by

agibsen

Independent User Experience and Frontend Designer from Denmark.

Updated on September 21, 2021

Comments

agibsen over 2 years

I'm trying to adjust Bootstrap tabs to make them span the full width of their container. Here's my code (a minimal working example):

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Full Width Tabs using Bootstrap</title>
        <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
        <style>
            .full-width-tabs > ul.nav.nav-tabs {
                display: table;
                width: 100%;
                table-layout: fixed; /* To make all "columns" equal width regardless of content */
            }
            .full-width-tabs > ul.nav.nav-tabs > li {
                float: none;
                display: table-cell;
            }
            .full-width-tabs > ul.nav.nav-tabs > li > a {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="tabbable full-width-tabs">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab-one" data-toggle="tab">Tab 1</a></li>
                <li><a href="#tab-two" data-toggle="tab">Tab 2</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab-one">
                    I'm in Tab 1.
                </div>
                <div class="tab-pane" id="tab-two">
                    Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. 
                </div>  
            </div> 
        </div> <!-- /tabbable -->

        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

    </body>
</html>

I get this (undesired) result:

Undesired tabs

However, I want the tab "headers" to span the entire width of the tab container - and distribute their individual width's evenly, something like this desired result:

desired tabs

How do I achieve that?

Update 1: Here's a JSFiddle: http://jsfiddle.net/agib/FZy4n/

Update 2: I already had a working widget using custom javascript. However, I'm looking for a solution that integrates seemlessly with Bootstrap and thus relies only on standard Bootstrap javascript.

Update 3: If I remove / comment out

 /* table-layout: fixed; */

header widths are taking up all horizontal space as needed. However, their widths are resulting from the length of the header texts and thus not distributed evenly.

This is not what I want either:

undesired tabs

Update 4: The upcoming Bootstrap 3 appears to have full-width tabs as a standard component using the class .nav-justified: Bootstrap 3 -> Navs -> Justified nav