Advertising sustains the DA. Ads are hidden for members. Join today

Tabs

Last updated on
16 May 2024

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.

  1. Create a view of the content you wish to display
  2. Each row in this view should be styled as 'Fields'
  3. For your format, select 'Bootstrap Tab'
    • Select the field which will be used as 'Tab'
  4. 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.

Tabs options

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 top

Tabs on the left sample display
Tabs on the left

tabs on the right example display
Tabs on the right

Tabs on the bottom example display
Tabs on the bottom

Tabs justified example display
Tabs justified

Tabs stacked example display
Tabs stacked

Pills on top example display
Pills on Top

Pills on left example display
Pills on the left

Pills on the right example display
Pills on the right

Pills on the bottom example display
Pills on the bottom

Pills justified example display
Pills justified

Pills stacked example display
Pills stacked

Help improve this page

Page status: No known problems

You can: