Nav Menus

• Link
• Link
• Link
• Disabled

To build a basic horizontal menu, use the .nav class on a <ul> apply .nav-item to each <li> and add .nav-link to the anchor tags inside.

Output 1:

Aligned Nav

• Link
• Link
• Link
• Disabled

• Link
• Link
• Link
• Disabled

Use the .justify-content-center class to center the navigation items, or .justify-content-end to align them to the right.

Output 2:

Vertical Nav

• Link
• Link
• Link
• Disabled

Apply the .flex-column class to turn the navigation into a vertical layout.

Output 2:

Tabs

• Active
• Link
• Link
• Disabled

Use the .nav-tabs class to style the navigation as tabs. Apply the .active class to highlight the current tab. For toggleable tabs, refer to the final example on this page.

Output 2:

Pills

• Active
• Link
• Link
• Disabled

Apply the .nav-pills class to style the navigation menu as pill-shaped tabs. For toggleable functionality, check the last example on this page.

Output 2:

Tabs with Dropdown

Output 2:

Toggleable / Dynamic Pills

The same code works for pills; just replace the data-toggle attribute with data-toggle="pill".

Output 2: