The implementation for pagination should be that when a user is on the first or last page, the respective "Prev" and "Next" buttons should not be rendered. The current page should also be implemented as a "<span />" rather than a "<a />" link for accessibility purposes.

Tabs organize content across different screens, data sets, and other interactions.

Usage

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. Each tab should contain content that is distinct from other tabs in a set. For example, tabs can present differently.

Alert Dialogues Tabs organize content across different screens, data sets, and other interactions.

For technical implementation, the close icon can be added to an alert optionally by simply omitting the button with a class name .alert-close-button.

Tabs organize content across different screens, data sets, and other interactions.

Usage

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. Each tab should contain content that is distinct from other tabs in a set. For example, tabs can present different sections of categories, different products, or different types of information.

Principles

1. Scalable
   • As tabs can horizontally scroll, a UI can have as many tabs as needed.
2. Informative
   • Tabs organize content into categories to help users easily find different types of information.
3. Peers
   • Tabs are displayed next to each other as peers, in categories of equal importance.

Types

Fixed tabs

Display all tabs on one screen, with each tab at a fixed width. Use fixed tabs when displaying a limited number of categories. When using fixed tabs, ensure they can all be seen on mobile, without truncating their text. Fixed tabs have equal width, which can be calculated either as:

• The width of the screen divided by the number of tabs
• The width of the widest tab label

Don’t use more than four fixed tabs at once.

They don’t scroll to reveal more tabs; the visible tab set represents the only tabs available. They are best for switching between related content quickly, such as between sections of information or payment methods. To navigate between fixed tabs, tap an individual tab.

Scrollable tabs

Displayed without fixed widths. They are scrollable, meaning some tabs will remain off-screen until scrolled. When a set of tabs cannot fit on screen, use scrollable tabs. Scrollable tabs can use longer text labels and a larger number of tabs. They are best used for browsing on touch interfaces.

The width of each tab is defined by the length of its text label. To navigate between a set of scrollable tabs, users swipe the set left or right. A tab set can be looped so when a user reaches the last tab in a set, the first tab is shown again. To select an individual tab, tap it. When tapped, a scrollable tab should reposition itself to become fully visible on screen.

Active tab indicators

To differentiate an active tab from an inactive tab, apply an underline and color change to the active tab’s text and icon. Color change should be determined by the brand’s primary color. Ensure ADA compliance color contrast guidelines are followed.

Technical Implemenation

Javascript is required to implement this page element. For details, see Bootstrap Documentation.

Simply use the base html element "<hr>"

Add relevant classes (shown below) to element with .modal-dialog class to implement sizing and fullscreen options.

Reference: Bootstrap Modal Documentation

Size Options

Full Screen Options

<div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header bg-light">
                <button type="button" class="btn close px-5 m-1 rounded-0" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">Close</span>
                </button>
                <h3 class="modal-title">Modal Title</h3>
            </div>
            <div class="modal-body px-5">
                <p class="text-muted">Duis volutpat elementum finibus. Donec neque diam, fringilla vel sem sit amet, sodales volutpat dui. Pellentesque aliquet tristique lorem et efficitur. Vestibulum rutrum diam vitae sapien posuere, in mattis neque ultricies. Etiam semper, erat nec luctus sagittis, risus mi venenatis lorem, eu pellentesque dui magna quis velit. Quisque nec enim ac lectus molestie faucibus id sed massa. Mauris posuere hendrerit eros, in sagittis tortor facilisis ac. </p>
            </div>
            <div class="modal-footer px-5">
                <button type="button" class="btn btn-outline-primary btn-block btn-sm" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>