Bootstrap components

Tabs and pills

Switch between views of the same content without leaving the page: tabs for a few sections, pills for filters and settings.

Tabs split one subject into parallel views and show one at a time. Tabs read as sections of a page; pills read as a choice (a filter, a settings menu). Both are the nav component with a panel for each entry.

When to use it

Use it

Two to six tabs with short, parallel names.
Tabs for views of the same thing (overview, participants, grades); pills for filters and for a vertical settings menu.
Show a count with a badge only when it helps to decide where to go.
Keep the first tab the one most people need.

Don't

Use tabs to navigate to other pages; use a navbar or links.
Put a long form across tabs the user must complete in order; use steps.
Nest tabs inside tabs.
Disable a tab without saying why.

Anatomy

A list of entries (nav with nav-tabs or nav-pills), each a link or button (nav-link), one of them active, and a panel (tab-pane) for each entry inside tab-content.

Variants and states

Tabs

A summary of the course: dates, teachers and the next activity.

Everyone enrolled, with their role and last access.

The gradebook, one column per activity.

Pills

Every course you can see.

Courses you started and have not finished.

Courses with every activity completed.

Vertical pills

The name, language and time zone of the site.

Logo, colours and the home page.

What is sent, to whom and how often.

The next example is not drawn with Bootstrap’s classes: it is the secondary navigation Moodle gives a course in the selected version (the pill with a dot for the selected item in Moodle 5.3, the underlined tab in 4.x). A plugin never redraws it; it only sits next to it.

Secondary navigation of Moodle

States

States

Combinations

Combination	Use it for
Tabs × panels	Views of the same subject, one visible at a time. The first tab is the one most people need.
Pills × filter	A choice that changes what a list shows (All, In progress, Completed). Add a count in a badge only when it helps.
Vertical pills × settings	Sections of a settings screen: the list on the left, the panel on the right.
Tabs inside a card	Put the tabs in the header of the card and the panels in its body.

What Didactika changes and why

What we changed	Why it helps
The selected tab has a line and a tint, the rest are quiet	Where you are is clear from the line, the tint and the weight at once, so it never depends on colour alone.
Pills are fully rounded	They read as a choice, not as sections, which is the difference between pills and tabs.
Hover tints and focus rings follow one rule	The control under the pointer or under the keyboard always answers the same way.
Moodle’s own navigation is left as Moodle draws it	The user meets the same navigation in every course and in every plugin; plugins should not teach a second one.

Classes

Class	What it does
`nav`	Base of every list of tabs and pills
`nav-tabs`, `nav-pills`	The look of the list
`nav-link`, `nav-item`	An entry and its wrapper
`active`, `disabled`	State of an entry
`flex-column`	Stacks the entries (vertical pills)
`tab-content`, `tab-pane`	The panels

In this version

Bootstrap 5.3 keeps its colours in CSS variables (--bs-*), so a theme recolours the component with one variable.

Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet. The entries of the examples are buttons; Bootstrap 4 draws them as links, so the layer resets the button.

Accessibility

The list has role="tablist", each entry role="tab" with aria-selected and aria-controls, each panel role="tabpanel" with aria-labelledby.
Arrow keys move between tabs and the panel is reachable with Tab: keep the native buttons.
A disabled tab has aria-disabled and tabindex="-1".
The active tab is never shown by colour alone: it also has the underline or the filled pill.