Basic Pills

Takes the basic nav pills from above and adds the .nav-pills class to generate a pilled interface.

Bordered Pills

Use .nav-pill-bordered class to .nav-pills for bordered type pills.

Bordered Pills with Active Border

Use .nav-pill-with-active-bordered class to .nav-pills for bordered type pills.

Active Border Pills

Use .nav-active-bordered-pill class to .nav-pills for bordered type pills.

Toolbar Pills

Use .nav-pill-toolbar class to .nav-pills for bordered type pills.

Basic Justified Pills

Use .nav-justified class to set Pills justified.

Stacked Pills

Basic Stacked Pills

Use .flex-column class with .nav.nav-pills to stack them vertically. Each .nav-link becomes block-level, allowing for larger hit areas via mouse or tap.

Stacked Pills Toolbar

Use .nav-pill-toolbar class to .flex-column for bordered type pills.

Pills Elements

Pills with Left Icon

Use font icons before pill name to get pills with icon.

Pills with Right Icon

Pills with Only Icon

Use font icons as pill name to get Icon pills.

Pills with Label

You can also use .badge.badge-COLOR classes to add label to pill.

Pills with Label

You can also use .badge.badge-pill.badge-glow.badge-COLOR classes to add label pill(badge) to pill.