Tabs

Tabs are used to divide content into meaningful, related sections. Tabs allow users to focus on one specific view at a time while maintaining sight of all the relevant content options available. Each tab, when active, will reveal its own unique content. Please read the official Bootstrap documentation for a full list of options.

Do:

  • Have only one tab active at a given time
  • Align the content of the page to the far left and far right edges of the tab line
  • Left align tabs within a page

Don't:

  • Use a disabled state. Hide unavailable tabs instead.
  • Right-align or justify tabs
  • Nest tabs