bootstrap_ref_comp_navs

Bootstrap Navigation and Related Components

Navs (Tabs and Pills)

Bootstrap’s navigation components (navs) are built with the .nav base class and come in several styles. Key classes include:

• .nav: Base class for all navigation components.
• .nav-tabs: Creates tabbed navigation.
• .nav-pills: Creates pill-style navigation.
• .nav-item: Applied to <li> elements within the nav.
• .nav-link: Applied to <a> elements within .nav-item. Can have an .active state and a .disabled state.
• .flex-column: Utility class to make navs (especially pills) stack vertically.
• .nav-fill: Makes nav items take up equal width within their parent.
• .nav-justified: Makes nav items take up equal width, similar to .nav-fill, but text is also justified. Best for items of similar width.
• .dropdown, .dropdown-toggle, .dropdown-menu, .dropdown-item: Used to add dropdowns to nav items. Requires data-bs-toggle="dropdown".
• .tab-content, .tab-pane: Used with .nav-tabs or .nav-pills to create togglable tabbed content. Requires JavaScript and appropriate data-bs-toggle attributes (data-bs-toggle="tab" or data-bs-toggle="pill") on the nav links, and corresponding IDs on the .tab-pane elements.

Example of Toggable Tabs:

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
  </li>
  ...
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  ...
</div>

Breadcrumb

Indicate the current page’s location within a navigational hierarchy. Separators are automatically added via CSS.

• .breadcrumb: The main wrapper for the breadcrumb list.
• .breadcrumb-item: Applied to each list item within the breadcrumb.
• .active: Applied to the .breadcrumb-item that represents the current page (usually the last item).

Example:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Pagination

Provides links for navigating through a series of pages.

• .pagination: The main wrapper for the pagination component.
• .page-item: Applied to each list item (link container).
• .page-link: Applied to the <a> or <span> within each .page-item.
• .active: Indicates the current page (applied to .page-item).
• .disabled: Indicates an unclickable link (applied to .page-item).
• .pagination-lg / .pagination-sm: For larger or smaller pagination links (applied to the .pagination wrapper).

Example:

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Note: The Pager component (.pager, .previous, .next) from Bootstrap 3 has been removed. Simple pagination or utility classes can be used for similar functionality.

Badges (Formerly Labels)

Badges are small count and labeling components. They scale to match the size of the immediate parent element by using relative font sizing and em units.

• .badge: Base class for a badge.
• .bg-*: Contextual background color classes (e.g., .bg-primary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark). Text color often contrasts automatically, or use .text-dark if needed for light backgrounds.
• .rounded-pill: Makes badges more rounded (pill-shaped).

Example:

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-danger rounded-pill">4</span>
</button>

Hero Sections (Jumbotron Alternative)

The .jumbotron class was removed in Bootstrap 5. To create a similar ‘hero’ section for calling extra attention to featured content or information, use utility classes for padding (e.g., .p-5), background colors (e.g., .bg-light), rounding (e.g., .rounded-3), and typography (e.g., .display-*).

Example:

<div class="p-5 mb-4 bg-light rounded-3">
  <div class="container-fluid py-5">
    <h1 class="display-5 fw-bold">Custom jumbotron</h1>
    <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
    <button class="btn btn-primary btn-lg" type="button">Example button</button>
  </div>
</div>

To make a hero section span the full width and without rounded corners, place it outside any .container class and omit rounding utilities.

For further details and more advanced usage, always refer to the official Bootstrap 5 documentation for each specific component.