Cards

Bootstrap 5 Pills component

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

Basic examples

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

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

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

Tab 1 content
Tab 2 content
Tab 3 content

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.

Tab 1 content
Tab 2 content
Tab 3 content

Justify

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

Tab 1 content
Tab 2 content
Tab 3 content

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
Home content
Profile content
Messages content