Bootstrap Horizontal Tabs

This module provides a field type called "Horizontal Tabs" which consists of tab label and tab body elements. The number of allowed tabs can be set when adding the field to an entity. Tab labels can be set to display as either traditional tabs or as pill buttons.

This module depends on the Bootstrap framework. It does not prescribe how Bootstrap should be integrated with the site, but presumes that it is integrated and that the tab JavaScript utility is loaded on all pages.

This implementation is compliant with WAI-ARIA guidelines for tab accessibility.

Options/Features

Display settings for the field formatter (i.e., "Manage Display") include:

• Tab style: "Tabs" (default) or "Pills"
• Tab orientation: "Horizontal" (default) or "Vertical"

Compatibility

• Bootstrap 3, 4 or 5

Note: Drupal 11 uses jQuery 4 which is not supported in Bootstrap 3 and 4.

The simplest way to integrate the required Bootstrap components is to use or sub-theme the Bootstrap Drupal theme (whose current stable version uses Bootstrap version 3).

If using with Bootstrap 4, you will need to include the `util.js` and `tab.js`
components. See https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior.

Installation & configuration

1. After enabling this module, go an entity's "Manage fields" page and click "Add field."
2. A new field type, "Horizontal Tabs," will be available.
3. Follow standard Drupal field steps for adding the field.
4. Under the "Manage Display" page, choose whether the tab headers should display as standard "Tabs" or "Pill buttons". See examples at https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior
5. Go to /admin/config/content/bootstrap-horizontal-tabs and select your version of Bootstrap being used. Note: This feature was added starting in version 2.0.7.

Starting in the 3.0.1 release, the default version of Bootstrap expected is 5.