Bootstrap Tabs and Pills: Creating Interactive Navigation and Content Organization

Learn how to use Bootstrap's tabs and pills for creating user-friendly and visually appealing navigation elements. This guide provides examples of creating horizontal and vertical tabs and pills, customizing their appearance, and integrating them effectively into your web designs.

Bootstrap Tabs and Pills: Creating Interactive Navigation

Bootstrap provides pre-styled components for creating tabs and pills—elements that make navigation easier and more visually appealing. This guide covers various Bootstrap menu styles and customizations.

Bootstrap Menus

Basic horizontal menus are easily created using Bootstrap's classes. Simply add the `.list-inline` class to an unordered list (`

    `) for a horizontal arrangement.

    Test it Now

    Bootstrap Tabs

    Bootstrap tabs provide a way to organize content into sections, allowing users to switch between them. You can easily mark the active tab.

    Test Basic Tabs Now

    Tabs with Dropdown Menus

    You can incorporate dropdown menus within your tabs for more complex navigation.

    Test Tabs with Dropdown Now

    Dynamic/Toggleable Tabs

    To create interactive tabs, add the `data-toggle="tab"` attribute to each tab link, wrap the tab content in a `

    ` with the class `.tab-content`, and give each tab pane a unique ID and the class `.tab-pane`. Add the `.fade` class for a fade-in/out effect.

    Test Dynamic Tabs Now

    Bootstrap Pills

    Pills are similar to tabs but have a rounder appearance. They function similarly to tabs.

    Test Pills Now

    Vertical Pills

    Add the `.nav-stacked` class to display pills vertically.

    Test Vertical Pills Now

    Pills with Dropdown Menus

    Just like tabs, pills can also include dropdown menus.

    Test Pills with Dropdown Now

    Dynamic/Toggleable Pills

    For interactive pills, use `data-toggle="pill"` instead of `data-toggle="tab"`. The implementation is otherwise the same as with dynamic tabs.

    Test Dynamic Pills Now

    Bootstrap 4 Nav Menus

    Bootstrap provides flexible nav menus. Add the `.nav` class to a `

      `, `.nav-item` to each `
    • `, and `.nav-link` to the links. You can control alignment (left, center, right) and create vertical menus using additional classes.

      Horizontal Alignment

      • Default: Left-aligned
      • Center: Add `.justify-content-center`
      • Right: Add `.justify-content-end`

      Test Nav Alignment Now

      Vertical Nav Menu

      Add the `.flex-column` class to make a vertical navigation menu.

      Test Vertical Nav Now

      Justified Tabs/Pills

      Use the `.nav-justified` class for equal-width tabs or pills.

      Test Justified Tabs/Pills Now