Tabs
The tabs will display your view content with tab titles. This implementation uses both options from Bootstrap 3 and Bootstrap 2. Due to new features in Bootstrap 5, we were able to recreate the options with just Bootstrap classes and no additional CSS included. See Bootstrap 5 documentation.
- Create a view of the content you wish to display
- Each row in this view should be styled as 'Fields'
- For your format, select 'Bootstrap Tab'
- Select the field which will be used as 'Tab'
- Exclude field that has been used as 'Tab' from display. Otherwise it will be rendered twice.
Note: The field used as a tab should not be "linked" to other content. If that setting is checked as it is by default for title fields, uncheck it for the tabs to work properly.

Tab types and position changed between Bootstrap 2 and 3. However, due to popular demand, we are able to add all of these options. All of the CSS needed to make the Bootstrap 2 options work has been included in the code when Tabs is the selected style.

Tabs on the top

Tabs on the left

Tabs on the right

Tabs on the bottom

Tabs justified

Tabs stacked

Pills on Top

Pills on the left

Pills on the right

Pills on the bottom

Pills justified

Pills stacked
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion
Still on Drupal 7? Security support for Drupal 7 ended on 5 January 2025. Please visit our Drupal 7 End of Life resources page to review all of your options.