2 templates of Bootstrap tabs with customized CSS

Adding some spice to Bootstrap tabs

In Bootstrap tabs tutorial, I showed you how to create tabs by using built-in Bootstrap classes. I also showed examples of overriding the tabs related classes and changing / adding a few properties for the look and presentation of tabs.

In this tutorial, I am going to extend the same i.e. overriding the default classes for creating tabs with a different style.

It will use a few built-in properties along with new or modified CSS. Have a look in the demos below.

A demo of tabs of Bootstrap with custom CSS

In this demo, four tabs are created by using Bootstrap and custom CSS. The same set of classes in the markup section are used as you would generally use. In the <style> section of <head> tag, the classes .tab, .nav-tabs, .tab .nav-tabs li a, .tab-content .tab-pane etc are overridden. First, have a look at the demo and I will explain the CSS properties used after that:

Bootstrap tabs CSS

See online demo and code

The CSS:


You may modify the border-radius of the tab-pane containing the tab’s content by .tab-content .tab-pane class.

For modifying the tab’s color or other properties find the tab .nav-tabs li a, tab .nav-tabs li a:hover and tab .nav-tabs li a:before classes and make changes appropriately. There, the CSS 3 transform property is also used for shaping the tabs.

The CSS is used in such a way that it will adjust for small devices. In devices with width less than 499px, the tabs will become panels and will be visible as shown below:

Bootstrap tabs responsive

So, the tabs are responsive or mobile friendly.

The markup section:


A demo with fading effect as switching tabs

In this demo, the tabs are fading as you switch from one to the other tab. A different style is used for tabs than above example along with fading effect.

Bootstrap tabs fade

See online demo and code

The only difference is using the fade class for all inactive tabs and fade-in for active tab and tweaking the CSS a bit.

Get the complete code from the demo page.