Explore Templates

Tabs

Documentation and examples for how to use Bootstrap’s included navigation tabs components. document

Basic example

Takes the basic nav from above and adds the variant="tabs" props to generate a tabbed interface.

Nav tab icon

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

Nav tab icon vertical

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

Nav tab pills

Takes the basic nav from above and adds the variant="pills" props to generate a pill interface.

Nav line tab

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

Segmented tab

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

Segmented tab type

Takes the basic nav from above and adds the .segmented-tabs-filled or .nav-justified with .nav-segmented-tabs class to generate a tabbed interface.

Vertical tabs

TabContent, and TabPane components along with any style of Nav allow you to quickly piece together your own Tabs component with additional markup needed.