Tabs
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
Alignment
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.
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.
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.
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.
Tabs position
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.
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.
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.
Tab colors
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