Tabs

Bootstrap 5 Tabs component

Tabs are quasi-navigation components which can highly improve website clarity and increase user experience.

Basic examples

Basic tabs are divided into 2 main sections - Tabs navs (containing nav-items) and Tabs content (containing tab-panes).

Use id and href attribute to connect tabs navs with tabs content.

In the example below Tab 1 uses href="#ex1-tabs-1" in the first nav-link element to connect it with the first tab-pane which has an ID ex1-tabs-1.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae lorem quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer scelerisque justo vitae felis interdum, eu molestie nulla tincidunt.
Aenean aliquam in ipsum ac imperdiet. Vestibulum vestibulum, mi non venenatis ultrices, nisi ipsum sollicitudin odio, nec mollis purus magna et libero.
Vivamus rhoncus eros arcu, quis finibus lacus dapibus at. Ut gravida mauris vel ultricies viverra.

Fill and justify

Force your .nav's contents to extend the full available width one of two modifier classes.

Fill

To proportionately fill all available space with your .nav-items, use .nav-fill. Notice that all horizontal space is occupied, but not every nav item has the same width.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae lorem quam.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Aenean aliquam in ipsum ac imperdiet. Vestibulum vestibulum, mi non venenatis ultrices.

Justify

For equal-width elements, use .nav-justified. All horizontal space will be occupied by nav links, but unlike the .nav-tabs above, every nav item will be the same width.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae lorem quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Integer scelerisque justo vitae felis interdum, eu molestie nulla tincidunt. Aenean aliquam in ipsum ac imperdiet.
Vestibulum vestibulum, mi non venenatis ultrices, nisi ipsum sollicitudin odio, nec mollis purus magna et libero. Vivamus rhoncus eros arcu.

Vertical

Stack your navigation by changing the flex item direction with the .flex-column utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., .flex-sm-column).

For proper layout, you may also need to use grid to adjust navs and content.

Home Profile Messages
Vestibulum vestibulum, mi non venenatis ultrices, nisi ipsum sollicitudin odio, nec mollis purus magna et libero. Vivamus rhoncus eros arcu
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae lorem quam. Orci varius natoque penatibus et magnis dis parturient montes.
Vestibulum vestibulum, mi non venenatis ultrices, nisi ipsum sollicitudin odio, nec mollis purus magna et libero.