Bootstrap 3 Toggable Tabs and Pills

In this tutorial I will show you how to create a working Toggable Tab and how – with small modifications – its markup can be changed into variations like Toggable Pills, Vertical Toggable Tabs, etc..

Short intro

The Bootstrap website shows several examples of Tabs and Pills in the section about the Navs component. What all these examples miss is content. It’s true that you can use Tabs and Pills strictly for navigational purposes. But in my experience Tabs and Pills are more often used to display content in so-called panes. You click on a tab and the corresponding page is shown.
DEMO

Tabs with content panes are also called Toggable Tabs and these are discussed in the section about Toggable Tabs on the Bootstrap website. However that section makes no reference to the Navs section.

In my opinion it’s more interesting to combine the two and that’s what I’ll do here. Along the way this will also clarify some issues that crop up when you try to put the sections on the Bootstrap website into practice.

Toggable Tabs

The Toggable Tabs section on the Bootstrap website shows you only half of what you need to get it to actually work. It shows the navigation part but doesn’t add the content panes. Below you see the complete markup for a working Toggable Tabs:

In this example the navigation (styled as tabs) starts in line 18 (highlighted). You have to insert the attribute data-toggle="tab" into each tab.

The content section (displayed in panes beneath the tabs) starts in line 24 (highlighted). Each pane requires the class tab-pane.

The tab and pane you want to display on opening the page also get the class active.

Linking a tab to a specific pane is done with the combination of the href attribute on the tab and the ID on the pane.

I used a basic template with files hosted on a CDN to include the jQuery and Bootstrap libraries.

Now that we have a working (Toggable) Tabs we can start creating the variations:

  • Pills to navigate instead of Tabs
  • Make the panes with content fade in on opening
  • Tabs/Pills with equal widths (of their parent)
  • Add one or more Dropdowns
  • Vertical Tabs/Pills with content displayed to the left/right

Pills to navigate

To style our navigation as Pills instead of Tabs we have to replace:

  1. the class nav-tabs (inside the opening ul tag) by nav-pills
  2. the data-toggle="tab" on each tab by data-toggle="pill"
No other changes are necessary to our previous markup (I have changed the anchor texts as well into Pill A, etc. but that’s just for recognition purposes).

Panes with ‘fade in’ effect

To get a ‘fade in effect and gradually display the content we need to insert a class fade into each pane. Fot the first tab pane you must also insert the class in to show the content initially:

DEMO - Tabs that Fade in

If you want to check the working of the plugin use a tool like Firebug. In the screenshot below you can see that the classes Active and In were added when I clicked on tab B :

Firebug shows Fade In effect

To make the ‘fade in’ effect noticeable I set a transition period in the style section of the demo, like this:

Tabs/Pills evenly spaced

Another style option is to have the tabs/pills display evenly spaced (= justified) along the entire width of the page/container (or of the entire width of an element wrapped around the Tabs/Pills).

To achieve this effect we insert the class nav-justified into the opening ul tag for our tabs/pills:

DEMO - Justified Toggable Pills

In my experience this works in browser Firefox, Chrome and Internet Explorer but not in Safari (in Safari it becomes right-aligned).

Vertically stacked Pills/Tabs

To change our Pills/Tabs into a vertically stacked variation we need to insert the class nav-stacked into the opening ul tag. The result would be a vertical stack of pills/tabs and the content pane displayed below that stack. I prefer to change this into panes that display to the right or left of the tabs/pills. To achieve that we need to add Bootstrap 3’s grid classes that set the number of columns for the nav and for the tab-content:

DEMO - Stacked Pills with panes to the right

If you prefer having the panes on the left and the tabs/pills on the right just add the class pull-right to the nav:

Tabs with dropdown

Our final variation in this tutorial is a Toggable Tabs/Pills with a dropdown:

As you can see in this markup we add a standard dropdown to the unordered list in the nav. And we add two ordinary extra panes.
DEMO - Tabs with dropdown

Tabs/Pills activated with a script

Until now all of the examples were activated by the data attribute data-toggle="tab". The other approach you can use to activate Toggable Tabs/Pills is to use a script. The Bootstrap website gives the markup for this under the heading “Methods”.Below I show you an adapted version where I have used Pills instead of Tabs and where a pane is shown on hover instead of click:

The script can be understood as follows:

  1. First we ensure that all the elements are loaded by using a document ready function.
  2. We then create a jQuery object that holds a collection of all the anchors inside the element with ID pills-first.
  3. On this collection we apply the jQuery method hover(). The script shows the pane linked to this pill that we hover over.
  4. The preventDefault is added to prevent that the browser would shows his normal behavior and take us to a new URL.
DEMO - Pills activated by script with hover

22 comments

Chethan - February 18, 2016 Reply

Hi,

Thank you so much for the tutorials, I have a question, I am using bootstrap on hover vertical tabs for my mega menu, The issue
that I am facing is when I hover on each tab links the corresponding tab-content loads which is fine, But when i try to move it in a criss-cross fashion other tabs are being selected, Can we set a delay on tab selection? I have jquery which servers the purpose but I don’t know how to implement this on bootstrap.

Request for a help! Thanks.

Theo - February 26, 2016 Reply

Hi Chethan,

setting a delay is not included as an option for the Bootstrap Tab plugin.

Lucas Ferreira - November 5, 2015 Reply

Thank you! Useful content, helpful demos and clear explanation!

Theo - November 5, 2015 Reply

Thanks!!!

ashish - August 27, 2015 Reply

Thanks Theo it is useful post.

Aman - June 2, 2015 Reply

First tab is showing nothing at first, it shows active after click on tab b. Any solution??

Theo - June 2, 2015 Reply

Hi Aman,

add the class ‘in’ for the first tab to show the content of that pane initially.

Not sure if I overlooked this at the time of writing the tutorial or if the explanation on getbootstrap.com was changed later on. Anyway thanks to your comment I checked it this morning and updated this section of the tutorial (and the ‘fade in’ demo).

Cheers, Theo

Vibhav - March 8, 2015 Reply

I have created a tab view (using pills as well as tab tags).
However, when the page is loaded on mobile version, it is still shown as tabs, hence wrapping the tabs (making view messy).
Is there a way by which I can use tab in desktop view, but use ‘nav-stacked’ in mobile view?

Thanks in advance.

Theo - March 8, 2015 Reply

I think this is what you’re looking for:

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

The solution was provided by admenva on stackoverflow.

abracadave - January 8, 2015 Reply

Does anyone know if with Bootstrap you can have two content columns collapse to tabs for tablet/mobile… so you have a #content at span9 and then your #sidebar at span3… when your media query hits say below 768px then the floated containers changed to a tabbed interface?

I’m no Bootstrap expert and I can’t find an example of this type of action anywhere? It would seem like something that would be baked into Bootstrap, no? I had my fingers crossed that that example might be in this fine list of examples!

Any suggestions? Cheers!

Theo - January 10, 2015 Reply

You’ll not find this in Bootstrap because your approach is technically a bit bizarre. What you propose would imply that a media query is used to change the HTML structure (a structure with div’s for content and sidebar needs to be rewritten to a tabs structure). Changing the HTML structure can be done with JavaScript/jQuery but not with CSS (media queries).

My guess is that you’re looking for a way to efficiently use the screen real estate on small screens such as smartphones. This can be achieved in different ways:

With Bootstrap’s approach the content div and the sidebar div will get stacked on top of each other. But it seems that this doesn’t satisfy you.

Another approach could be to make the sidebar invisible (creating maximum screen real estate on small screens for the content) and let the sidebar slide out from the right or left. That way it will display its sidebar contents in front of the main content (just like an active tab pane displays its contents in front of another tab pane). So my suggestion would be to look for a sidebar that will toggle between hidden and show (with a slide out effect).

Andy Koenigsberg - January 6, 2015 Reply

This was a huge help to me. I was screwing around with all sorts of custom js and css to make up for the fact that bootstrap no longer supported vertical tabs. I see now, for good reason. This demo also was a very good learning experience for me on how to mix and match various aspects of bootstrap selectors to achieve the desired results.

ashish - December 3, 2014 Reply

thank you so much for this nice and cool demo

Peter Sorensen - October 15, 2014 Reply

Nice tutorial! Thanks!

Mohammad Amin Abou Harb - October 15, 2014 Reply

Can you make the transition effect a slide effect instead of a fade? like slide from left or from top?

Theo - November 8, 2014 Reply

Hi Mohammad,

Bootstrap provides a class “fade” but not a class “slide”. So there is no easy way to create a slide effect for the Tabs. You’d need to create this effect yourself (e.g. with jQuery).

Maybe the slide effect will be included in Bootstrap 4. In the preview of what’s to come I read that “new component animations and transitions for several components” will be added in Bootstrap 4.

Bootsrap Lover - August 22, 2014 Reply

Nice tutorials and great site. How would you target a particular tab on page load? Say for example a link from a page to load your page and #tab2 is displayed first instead of the default tab#1

Theo - August 22, 2014 Reply

Hi,

thanks for the compliment.

To display tab2 and pane2 on page load you need to re-locate the “active” class on both. In the demo(s) the “active” class is used in the opening li tag for Tab A (so you need to delete it here and add the “active” class to the li tag for Tab B). Same for the “active” class in the opening div tag for Pane A.

Cheers,

Theo

neha - February 21, 2014 Reply

Easy Tutorial!! Thanks

Theo - February 21, 2014 Reply

Hi Neha,

thanks!

Mladen Mihajlovic - October 22, 2013 Reply

Nice. How about one last demo. How to make the content area bordered so that the tab and content look like one area?

Theo - October 22, 2013 Reply

Hi Mladen,

thanks!

There are several options to make the tab/pill and the content pane look more like one are: setting a border, setting the same background color. Setting the border could be done with:
.tab-content > .active, .pill-content > .active {border-bottom: 1px solid #xxx, border-left: 1px solid #xxx, etc.}. You’ll notice that only setting the border would lead to a gap between the tab/pill and the content pane.
My intention is to treat the styling of components in separate tutorials. That would leave more room to explain how you can really improve the unity in the styling.

Add your comment