The tabs structure consists of an unordered list of tabs that have hashes corresponding to tab ids. Then when you click on each tab, only the container with the corresponding tab id will become visible.

Markup

We use Bootstrap nav-tabs as a base for the tabs component. Simply create a list element and add the .nav and .nav-tabs classes. For further documentation read the bootstrap docs.

You can activate a tab navigation without writing any JavaScript by simply specifying data-toggle="tab" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the tab styling.


One

Two

Three

You can align the tabs to the left, right, centered and justified. By default the tabs are left aligned in the header.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Left aligned tabs (default)

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Right aligned tabs

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Centered tabs

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Justified tabs

Tabs can not only be placed above the content, but also left, right and below the content.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Left sidebar layout

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Right sidebar layout

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Below layout

Default color 1

Default color 2

Default color 3

Default light color 1

Default light color 2

Default light color 3

Primary color 1

Primary color 2

Primary color 3

Secondary color 1

Secondary color 2

Secondary color 3