Pills
We are currently working on redesigning the following content.
Table of contents
Related
Design guide
Description
(Info goes here)
Default pills
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>Use when
(Info goes here)
Do not use when
(Info goes here)
Vertical pills
Pills are also vertically stackable. Just add .nav-stacked.
<ul class="nav nav-pills nav-stacked">
...
</ul>Use when
(Info goes here)
Do not use when
(Info goes here)
Justified pills
Easily make tabs or pills equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked.
<ul class="nav nav-pills nav-justified">
...
</ul>Use when
(Info goes here)
Do not use when
(Info goes here)
Disabled links
Add .disabled for gray links and no hover effects.
Link functionality not impacted
This class will only change the <a>'s appearance, not its functionality. Remove the href attribute to disable links here.
<ul class="nav nav-pills">
...
<li class="disabled"><a href="#">Disabled link</a></li>
...
</ul>Use when
(Info goes here)
Do not use when
(Info goes here)
Some of the code and documentation for this page is sourced from Bootstrap
- Date modified: