Basic Tabs

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface.

Oat cake marzipan cake lollipop caramels wafer pie jelly beans. Icing halvah chocolate cake carrot cake. Jelly beans carrot cake marshmallow gingerbread chocolate cake. Gummies cupcake croissant.. Tab 2 Sugar plum tootsie roll biscuit caramels. Liquorice brownie pastry cotton candy oat cake fruitcake jelly chupa chups. Pudding caramels pastry powder cake soufflé wafer caramels. Jelly-o pie cupcake. Tab 3 Biscuit ice cream halvah candy canes bear claw ice cream cake chocolate bar donut. Toffee cotton candy liquorice. Oat cake lemon drops gingerbread dessert caramels. Sweet dessert jujubes powder sweet sesame snaps.

Top Border Tabs

Use .nav-top-border .no-hover-bg class for top bordered active type in Top Border Tabs.

Topline with box

Use .nav-topline class for topline box active type.

Select an active Tab by ID

Oat cake marzipan cake lollipop caramels wafer pie jelly beans. Icing halvah chocolate cake carrot cake. Jelly beans carrot cake marshmallow gingerbread chocolate cake. Gummies cupcake croissant.. Tab2 Sugar plum tootsie roll biscuit caramels. Liquorice brownie pastry cotton candy oat cake fruitcake jelly chupa chups. Pudding caramels pastry powder cake soufflé wafer caramels. Jelly-o pie cupcake. Tab3 Biscuit ice cream halvah candy canes bear claw ice cream cake chocolate bar donut. Toffee cotton candy liquorice. Oat cake lemon drops gingerbread dessert caramels. Sweet dessert jujubes powder sweet sesame snaps.

With Bottom Border

Different bottom border styles for active tabs.

Bottomline with box

Use .nav-underline class for bottom bordered active type.

Bottomline with Triangle

Use .nav-linetriangle class for bottom triangle active type.

Tabs with Icons

Icon on left,right & both side of the tab. Only icons tabs also available.

Basic Tabs

Basic Tabs with Bottom Line

Basic Tabs with Bottom Line

Basic Tabs with Bottom Arrow

Basic Tabs with Icon Fall

Use .nav-iconfall class for icon fall for active state.

Tabs with Only Icon

Use .nav-only-icon class when you use only icons, So that will increase font size.

Tabs with Labels & Pills

Labels & pills on left & right side of the tab.


Tabs with label

You can also use .badge .badge-COLOR classes to add label to the tab.

Tabs with pills

You can also use .badge .badge-pill .badge-COLOR classes to add label pill to the tab.

Vertical Tabs

Vertical Left Tabs

Wrap tabs and tab content with .nav-vertical class. To add left navigation use .nav-left class to .nav.nav-tabs.

Vertical Right Tabs

Wrap tabs and tab content with .nav-vertical class. To add right navigation use .nav-right class to .nav.nav-tabs.

Tabs with Left Border

Wrap tabs and tab content with .nav-vertical class. To add left navigation use .nav-left & use nav-border-leftclass to .nav.nav-tabs for leftside border effect to tab.

Tabs with Right Border

Wrap tabs and tab content with .nav-vertical class. To add right navigation use .nav-right & use nav-border-rightclass to .nav.nav-tabs for leftside border effect to tab.

Tabs with Icon

You can also add icons to the tab name.

Tabs with Icon

You can also add icons to the tab name.

Tabs with Labels, Pills & Left Border

Tabs with Labels, Pills & Right Border