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

Detailed documentation and more examples you can find in our Bootstrap Pills Docs


Basic example

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

Tab 1 content
Tab 2 content
Tab 3 content

Note: To see more examples and sourcecodes check Bootstrap Pills Docs

Fill example

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

Vertical example

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).

Home content
Profile content
Messages content