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