Single button dropdowns

Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

Tabs

Note the .nav-tabs class requires the .nav base class.

• Home
• Profile
• Messages

Pills

Take that same HTML, but use .nav-pills instead:

• Home
• Profile
• Messages

Pills Vertical

Pills are also vertically stackable. Just add .nav-stacked.

• Active
• Link
• Link
• Disabled

Fill and justify

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.

• Active
• Longer nav link
• Link
• Disabled

• Active
• Longer nav link
• Link
• Disabled

Using dropdowns

Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

Tabs with dropdowns

• Home
• Help
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

Pills with dropdowns

• Home
• Help
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.

Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.