Bootstrap Tabs and Pills

Bootstrap Tabs and Pills are components used to organize and switch between multiple content sections within the same page. Tabs are standard, while pills are rounded and often used for navigation.

Available in Bootstrap 3, 4, and 5, with minor syntax differences.

✅ Basic Tabs

• .nav-tabs → Creates standard tabs.

• .tab-content → Container for tab content.

• .tab-pane → Individual content panels.

• .active and .in → Show active tab (Bootstrap 3). Use .show active in Bootstrap 4/5.

🔹 Pills

Pills are rounded navigation items instead of square tabs:

• Styling is similar to tabs but with a more rounded look.

🔁 Vertical Tabs/Pills

You can display tabs/pills vertically:

• Use .nav-stacked (Bootstrap 3) or .flex-column (Bootstrap 4/5) for vertical alignment.

🎯 Tabs with Dropdown

You can also have dropdowns inside tabs:

✔ Summary