container-header

Tabs & Accordions

container-breadcrumb
Settings
Fixed sidebar
Fixed footer
Fixed top navbar
Collapse sidebar
Boxed
Background
Default
Dark
Light
Themes
Default
White Light
Blue Navy
Blue Sky
Lime Lemon
Star Dust
Green Tea
Orange Round
Yellow Sun
Deep Purple
Yummy Chocolate
Dark Night
Soft Green
Wheel Red

Tabs

Tabs Basic

CSS Classes: .tab,.tab-content, .navand .nav-tabs

First Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora.

Second Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per.

Third Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper.

Tabs Dropdown

CSS Classes: .tabwidth .dropdown

First Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora.

Second Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per.

Third Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper.

Tabs Theme

CSS Classes: .tabwith .tab-theme

Second Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora.

Second Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per.

Third Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper.

Change the color theme to see how the tabs colors changes:

Tabs Left

CSS Classes: Just add .tabs-leftwith the .tabclass

First Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper augue. Nulla vel interdum mauris, eu porttitor libero. Nulla convallis neque vel augue pretium, et blandit diam porttitor. Pellentesque at ligula ipsum. Vivamus faucibus nec felis a efficitur. Nam eu.

Second Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper augue. Nulla vel interdum mauris, eu porttitor libero. Nulla convallis neque vel augue pretium, et blandit diam porttitor. Pellentesque at ligula ipsum. Vivamus faucibus nec felis a efficitur. Nam eu dui pellentesque, sagittis magna et, dapibus nulla. Maecenas congue sodales.

Third Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper augue. Nulla vel interdum mauris, eu porttitor libero. Nulla convallis neque vel augue pretium, et blandit diam porttitor. Pellentesque at ligula ipsum. Vivamus faucibus nec felis a efficitur. Nam eu dui pellentesque, sagittis magna et, dapibus nulla. Maecenas congue sodales turpis non tempus. Integer tristique blandit est, quis congue massa.

Tabs Hover

To make tabs activated on hover, add data-toggle="tab-hover"to the aelements in the nav-tabslist.

First Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora.

Second Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per.

Third Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper.

Configuration Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper augue. Nulla vel interdum mauris.

Tabs Separation

CSS Classes: .tab-1p, .tab-2p, .tab-4por .tab-8p

Example: .tab-1p

First Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora.

Second Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per.

Third Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper.

Tabs Bootstrap Colors

CSS Classes: .tabwith .tab-default, .tab-primary, .tab-info, .tab-success, .tab-warning, .tab-dangeror .tab-inverse

Example: .tab-warning

First Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora.

Second Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per.

Third Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper.

Third Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper.

Tabs Bottom

CSS Classes: .tabs-bottom

First Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora.

Second Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per.

Third Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper.

Tabs Right

CSS Classes: Just add .tabs-rightwith the .tabclass

First Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper augue. Nulla vel interdum mauris, eu porttitor libero. Nulla convallis neque vel augue pretium, et blandit diam porttitor. Pellentesque at ligula ipsum. Vivamus faucibus nec felis a efficitur. Nam eu.

Second Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper augue. Nulla vel interdum mauris, eu porttitor libero. Nulla convallis neque vel augue pretium, et blandit diam porttitor. Pellentesque at ligula ipsum. Vivamus faucibus nec felis a efficitur. Nam eu dui pellentesque, sagittis magna et, dapibus nulla. Maecenas congue sodales.

Third Tab Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper augue. Nulla vel interdum mauris, eu porttitor libero. Nulla convallis neque vel augue pretium, et blandit diam porttitor. Pellentesque at ligula ipsum. Vivamus faucibus nec felis a efficitur. Nam eu dui pellentesque, sagittis magna et, dapibus nulla. Maecenas congue sodales turpis non tempus. Integer tristique blandit est, quis congue massa.

Panel with Tabs

Home

Profile

Messages

Configuration

CSS Classes: .panel .panel-heading .panel-control

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Accordions

Accordion Basic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper augue. Nulla vel interdum mauris, eu porttitor libero. Nulla convallis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper augue. Nulla vel interdum mauris, eu porttitor libero. Nulla convallis neque vel augue pretium, et blandit diam porttitor. Pellentesque at.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper augue. Nulla vel interdum mauris, eu porttitor libero. Nulla convallis neque vel augue pretium, et blandit diam porttitor. Pellentesque at ligula ipsum. Vivamus faucibus nec felis a efficitur. Nam eu.

Accordion In Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper augue. Nulla vel interdum mauris, eu porttitor libero. Nulla convallis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper augue. Nulla vel interdum mauris, eu porttitor libero. Nulla convallis neque vel augue pretium, et blandit diam porttitor. Pellentesque at.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper augue. Nulla vel interdum mauris, eu porttitor libero. Nulla convallis neque vel augue pretium, et blandit diam porttitor. Pellentesque at ligula ipsum. Vivamus faucibus nec felis a efficitur. Nam eu.

Accordion Bootstrap Colors

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper augue. Nulla vel interdum mauris, eu porttitor libero. Nulla convallis neque vel augue pretium, et blandit diam porttitor. Pellentesque at ligula ipsum. Vivamus faucibus nec felis a efficitur. Nam eu dui pellentesque, sagittis magna et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper augue. Nulla vel interdum mauris, eu porttitor libero. Nulla convallis neque vel augue pretium, et blandit diam porttitor. Pellentesque at ligula ipsum. Vivamus faucibus nec felis a efficitur. Nam eu dui pellentesque, sagittis magna et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper augue. Nulla vel interdum mauris, eu porttitor libero. Nulla convallis neque vel augue pretium, et blandit diam porttitor. Pellentesque at ligula ipsum. Vivamus faucibus nec felis a efficitur. Nam eu dui pellentesque, sagittis magna et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper augue. Nulla vel interdum mauris, eu porttitor libero. Nulla convallis neque vel augue pretium, et blandit diam porttitor. Pellentesque at ligula ipsum. Vivamus faucibus nec felis a efficitur. Nam eu dui pellentesque, sagittis magna et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper augue. Nulla vel interdum mauris, eu porttitor libero. Nulla convallis neque vel augue pretium, et blandit diam porttitor. Pellentesque at ligula ipsum. Vivamus faucibus nec felis a efficitur. Nam eu dui pellentesque, sagittis magna et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempor risus, sed tempor velit. Phasellus ut maximus nulla. Curabitur sit amet maximus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse vitae ullamcorper augue. Nulla vel interdum mauris, eu porttitor libero. Nulla convallis neque vel augue pretium, et blandit diam porttitor. Pellentesque at ligula ipsum. Vivamus faucibus nec felis a efficitur. Nam eu dui pellentesque, sagittis magna et.