Bootstrap 4 JavaScript Tabs

Welcome to The Coding College! In this article, we’ll explore the Bootstrap 4 JavaScript Tabs feature, a powerful component that allows you to organize content into dynamic, interactive tabs.

Tabs are perfect for dividing content into sections that can be displayed one at a time, saving screen space and enhancing user experience.

What Are Bootstrap Tabs?

Bootstrap Tabs are components that let you toggle between content panes dynamically. Tabs work via JavaScript and require proper markup and initialization. They’re commonly used for navigation or displaying related information in an organized way.

1. Basic Structure for Tabs

To create tabs, you need:

  • A tab navigation bar for toggling between panes.
  • A tab content area to display the content associated with each tab.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 4 Tabs</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-5">
    <!-- Tab Navigation -->
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
      </li>
    </ul>

    <!-- Tab Content -->
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <h4>Home Content</h4>
        <p>This is the home section.</p>
      </div>
      <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
        <h4>Profile Content</h4>
        <p>This is the profile section.</p>
      </div>
      <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
        <h4>Contact Content</h4>
        <p>This is the contact section.</p>
      </div>
    </div>
  </div>

  <!-- jQuery, Popper.js, and Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

2. Explanation of Code

  1. Navigation Bar (ul.nav-tabs)
    • Use the nav-tabs class to style the tab navigation.
    • Each a tag contains attributes like data-toggle="tab" to activate the tab, href="#id" to link to the content pane, and aria-* attributes for accessibility.
  2. Tab Content (div.tab-content)
    • Wrap all content panes in a container with the tab-content class.
    • Each pane is defined using the tab-pane class.
    • Use fade for smooth transitions and show active for the default active tab.

3. Adding Custom Styling to Active Tabs

You can customize active tabs using the .active class. Here’s an example of adding custom CSS:

.nav-tabs .nav-link.active {
  background-color: #007bff;
  color: white;
  font-weight: bold;
}

4. Tabs with Icons

You can enhance tabs by adding icons using libraries like Font Awesome or Bootstrap Icons.

Example:

<ul class="nav nav-tabs" id="iconTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="true">
      <i class="fas fa-home"></i> Dashboard
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">
      <i class="fas fa-cogs"></i> Settings
    </a>
  </li>
</ul>

5. Vertical Tabs

You can create vertical tabs by using the flex-column class.

Example:

<div class="row">
  <div class="col-3">
    <ul class="nav nav-pills flex-column" id="v-pills-tab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="v-pills-home-tab" data-toggle="tab" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="v-pills-profile-tab" data-toggle="tab" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      </li>
    </ul>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
        <p>Home Content</p>
      </div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
        <p>Profile Content</p>
      </div>
    </div>
  </div>
</div>

6. Programmatic Control of Tabs

You can control tabs programmatically using Bootstrap’s JavaScript API.

Methods

MethodDescription
.tab('show')Shows the specified tab.
.tab('dispose')Removes the tab functionality.

Example:

<button id="openProfile" class="btn btn-primary">Open Profile Tab</button>

<script>
  $('#openProfile').click(function () {
    $('#profile-tab').tab('show'); // Opens the "Profile" tab
  });
</script>

7. Best Practices for Tabs

  1. Accessibility: Use ARIA attributes (aria-controls, aria-selected) to ensure compatibility with assistive technologies.
  2. Content Organization: Keep tabs concise and group related content logically.
  3. Mobile Responsiveness: Ensure tabs work well on small screens. Use vertical tabs or collapsible content if necessary.

Conclusion

The Bootstrap 4 JS Tabs component is a fantastic tool for organizing content on your website. With support for customization, responsive layouts, and JavaScript control, tabs can enhance user experience and make navigation seamless.

Leave a Comment