Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

All You Need to Know About Bootstrap Tabs

Creating intuitive user interfaces is crucial for engaging web applications. A key component in crafting seamless navigation experiences is the tabbed interface. Tabs allow for organized content categorization, optimized space usage, and simplified content discovery.

Bootstrap, with its extensive collection of reusable UI components, provides a robust tab plugin to effortlessly incorporate this important navigation pattern into projects.

In this comprehensive guide for beginners, we will explore the ins and outs of building tabbed navigation in Bootstrap tabs. Through detailed explanations and code examples, you’ll learn Bootstrap’s best practices for implementing accessible, mobile-friendly tabs tailored to your use case.

Key topics include:

  • Fundamentals of Bootstrap’s base navigation component

  • Transforming navigation to tabs with .nav-tabs

  • Styling and layout options for customization

  • Responsive variations using Flexbox utilities

  • Considerations for accessibility

  • Enhancing tabs with dropdown menus

By the end, you’ll have the knowledge to utilize tabs for improved information architecture across your sites and apps.

For even more pre-made tab components you can use, be sure to check out Purecode.ai‘s marketplace library of over 10,000 Tailwind CSS, CSS3, and MUI components. It is a great resource that can save you time in implementing responsive tab designs.

Now, let’s dive into the wonderful world of tabbing with Bootstrap!

Importance of Tabs in Creating Interactive User Interfaces

Tabs are an essential component for building engaging and intuitive user interfaces in web applications. Organizing content into tidy, labeled sections, and tabs allows for improved content discoverability and reduce clutter on pages.

Some key reasons why tabs enhance interactivity:

You can also design more focused and useful layouts for intricate interfaces and data-heavy apps by taking advantage of these interactions. Thus, through improved sectioned content discovery, tabs increase user efficacy.

Below code demonstrates basic new active tab:


<div class="tab pane container" role="tabpanel" aria-labelledby="">
  <h2>Dynamic Tabs</h2>
  <p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>

  <ul class="tab pane nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab pane tab-content" role="tabpanel" aria-labelledby="">
    <div id="home" class="tab-pane fade in active" role="tab" aria-controls="">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

</body>
</html>
<!-- Example Tab Structure -->

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#home" data-toggle="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#profile" data-toggle="tab">Profile</a>
  </li>
</ul>
Bootstrap Tabs

Base Navigation in Bootstrap: A Comprehensive Guide

The .nav navigation element is a robust and adaptable component that comes with Bootstrap. It is the basis for developing interactive and user-friendly interfaces.

Base .nav Component

Bootstrap’s base .nav component has the flexibility of flexbox. It offers a versatile and responsive solution for creating various types of navigation components. Here is an example of how to make a simple navigation bar:

<nav class="nav" role="tab" aria-controls="">
  <a class="nav-link active" aria-current="page" href="#">Home</a>
  <a class="nav-link" href="#">About</a>
  <a class="nav-link" href="#">Services</a>
  <a class="nav-link disabled">Contact</a>
</nav>

Base .nav Component

The aria-current attribute used in the code above indicates the active state of assistive technologies. This is critical for accessibility and contributes to a more inclusive user experience.

Available Styles to Modify .nav Components

Bootstrap also provides various modifiers and utilities that allow for easy styling adjustments to the .nav component.

  • Horizontal Alignment

For horizontal centering of navigation links, the .justify-content-center class can be used:

<ul class="nav justify-content-center" role="tab" aria-controls="">
    <li class="nav-item">
    <a class="nav-link active" href="#home" data-toggle="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#profile" data-toggle="tab">Profile</a>
  </li>
</ul>

Horizontal Alignment

For right-aligned navigation, the .justify-content-end class can be used:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#home" data-toggle="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#profile" data-toggle="tab">Profile</a>
  </li>
</ul>

right-aligned navigation
  • Vertical Stacking

Vertical stacking of navigation links is possible with the .flex-column utility:

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#home" data-toggle="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#profile" data-toggle="tab">Profile</a>
  </li>
</ul>

Vertical Stacking

Tabs in Bootstrap

Do you want to skip ahead and learn via a YouTube video tutorial? Check out this crash course on Bootstrap tabs:

Introduction to Bootstrap Tabs

Bootstrap tabs provide an interactive and organized way to manage and display content. They transform a regular navigation bar into a tabbed interface, enhancing the user experience by making content navigation more intuitive.

As you have seen earlier, to create tabs in Bootstrap, simply add the .nav-tabs class to your base .nav component. This class transforms the navigation links into tabs. For example:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Messages</a>
  </li>
</ul>

Bootstrap Tabs

The .nav-tabs class is added to the ul element, which contains the navigation links, in this code snippet. Each link is contained within a li element with the class .nav-item. Therefore, the .active class and the aria-current=”page” attribute indicate the active tab.

Pills – An Alternative to Tabs in Bootstrap

In addition to tabs, Bootstrap also provides an alternative navigation component known as “pills”. Pills offer a different visual style but function similarly to tabs, providing an interactive way to manage and display content.

To create pills in Bootstrap, you simply need to add the .nav-pills class to your base .nav component. This class transforms the navigation links into pill-style navigation.

This event fires on tab show after a tab shows. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.

Below is an example:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Settings</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Logout</a>
  </li>
</ul>

Bootstrap Pills

The .nav-pills class is added to the ul element, which contains the navigation links, in this code snippet. Each link is contained within a li element with the class .nav-item. The .active class and the aria-current=”page” attribute indicate the active pill.

Fill and Justify

Bootstrap provides two very useful classes, .nav-fill and .nav-justified, that allow you to control the layout of your tabs and pills.

  • Proportional Filling of Available Space

The .nav-fill class can be used when you want your navigation items to fill up the available horizontal space in a proportional manner. Each .nav-link will occupy space based on its content size. Here is an example:

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Settings</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Logout</a>
  </li>
</ul>

Proportional Filling

The .nav-fill class is added to the ul element, which contains the navigation links, in this code snippet. As a result, each navigation link takes up space proportional to its content size.

  • Equal-Width Elements

The .nav-justified class can be used when you want your navigation items to have equal width, regardless of their content size. Here is an example:

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Settings</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Logout</a>
  </li>
</ul>

Equal-Width Elements

The .nav-justified class is applied to the ul element, which contains the navigation links, in the code above. As a result, regardless of the size of the content, each navigation link takes up the same amount of space.

Working with Flex Utilities in Bootstrap Tabs

Bootstrap’s Flexbox utilities offer a very useful toolset for managing the layout of your tabs and pills. These utilities provide a flexible and responsive solution for creating variations in your navigation components.

  • Responsive Navigation Variations

You can create responsive navigation variations using Bootstrap’s Flexbox utilities. For instance, you can create a navigation bar that stacks on smaller screens and becomes horizontal on larger screens. Here is an example:

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="nav-link active" aria-current="page" href="#">Home</a>
  <a class="nav-link" href="#">About</a>
  <a class="nav-link" href="#">Services</a>
  <a class="nav-link disabled">Contact</a>
</nav>

Responsive Navigation Variations

The flex-column utility is used in this code snippet to stack the navigation links vertically. On sm (small) or larger screens, the flex-sm-row utility overrides this, causing the navigation links to display horizontally.

Accessibility Considerations in Bootstrap Tabs

Accessibility is a crucial aspect of web development. It ensures that web content is accessible to all users, including those with disabilities. Bootstrap provides several features to make your tabs and pills more accessible.

One key accessibility consideration when working with Bootstrap tabs is the use of appropriate ARIA (Accessible Rich Internet Applications) attributes. These attributes also provide additional information about the semantics of the various elements and how they are to be used or interacted with.

When creating a navigation bar, it is recommended to add the role=”navigation” attribute to the parent container. This attribute indicates to assistive technologies that the container is a navigation section. Here is an example:

<nav role="navigation" class="nav">
  <!-- Navigation links go here -->
</nav>

Proper usage of ARIA attributes, especially for dynamic tabbed interfaces, contributes to a more inclusive user experience. Likewise it helps assistive technologies, like screen readers, understand the content and provide appropriate feedback to the user.

Using Dropdowns with Tabs in Bootstrap

Thus, integrating dropdown menus with tabs in Bootstrap is a straightforward process that enhances the functionality of your navigation components. Additionally, dropdown menus provide a way to include additional links without cluttering the interface.

Here is an example of how to integrate dropdown menus with tabs:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </li>
</ul>

Using Dropdowns with Tabs in Bootstrap

A dropdown menu is added to the tabs navigation in the code above. The class dropdown is applied to the li element that contains the dropdown menu. The dropdown-toggle class and data-bs-toggle=”dropdown” attribute are applied to the element that initiates the dropdown. Each menu item is a li element containing an element with the dropdown-item class, and the dropdown menu is contained within a ul element with the ‘dropdown-menu’ class.

Customizing Tab Styles and Design in Bootstrap

However, one of the major advantages of Bootstrap’s tab component is the flexibility to customize the visual styling. Tabs can be tailored to match specific brand needs through CSS modifications.

Dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab’s trigger element is not immediately visible (as it’s inside the closed dropdown menu) can cause confusion.

So from an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technology.

Bootstrap includes basic tab styling out of the box, but this can be enhanced through additional CSS.

Changing Tab Colors

The background and text colors for both inactive and active tab states can be modified by targeting the following classes:

.nav-tabs .nav-link
.nav-tabs .nav-link.active

For example, to change the active tab background and text:

.nav-tabs .nav-link.active {
  background: purple;
  color: white;
}

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" style="background: purple; color: white;" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
</ul>

Changing Tab Colors

Tab Borders

Border color, width, and radius can all be customized as well. Bootstrap applies border-top-left-radius and border-top-right-radius by default to give a rounded effect.

Remove rounded borders:

.nav-tabs .nav-link {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

Add borders between tabs:

.nav-tabs .nav-link {
  border-right: 1px solid gray;
}

.nav-tabs .nav-link:last-child {
  border-right: none;
}

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link" style="border-right: 1px solid gray;" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
</ul>

Tab Borders

Tab Gradients

For more vibrant tabs, CSS gradients can be utilized. This creates a smooth fade transition background behind the tabs.

.nav-tabs {
  background: linear-gradient(0deg, yellow, red);
}

<ul class="nav nav-tabs" style="background: linear-gradient(0deg, yellow, red);">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
</ul>

Tab Gradients

Explore adding multiple backgrounds and directional gradients for more depth.

In summary, while Bootstrap provides basic tab styling, there is significant room for custom enhancements through additional CSS. Tabs can be designed to align with specific brand colors, textures, and styles.

Comparison of Bootstrap Tabs vs React Tabs

In addition to Bootstrap, other JavaScript libraries provide tab component implementations, such as React Tabs.

While both Bootstrap and React Tabs enable building tab interfaces, there are some key differences:

Bootstrap Tab Pros

  • Less coding – Quickly add tabs via class names and minimal JavaScript

  • Familiar syntax – Uses native HTML markup for tab structure

  • Customizable styling – Modify visual style through CSS/Sass

Bootstrap Tab Cons

  • Limited dynamic features – More complex to build advanced interactions

  • Additional JS plugins needed – For enhanced functionality like swipeable tabs

React Tab Pros

  • Highly dynamic – Stateful component that updates when the tab changes

  • Flexible rendering – Can use React components within tabs

  • Animated transitions – Animate tab switching out of the box

  • Isomorphic support – Can render tabs via server (SSR)

React Tab Cons

  • Increased complexity – More involved setup and coding logic

  • Steeper learning curve – Requires React knowledge

  • Less custom styling – Some style limitations to component output

In summary:

  • Bootstrap is simpler for basic use cases requiring minimal JavaScript. You can use JavaScript enable tabbable tabs. The tab JavaScript plugin does not support tabbed interfaces that contain dropdown menus, as these cause both usability and accessibility issues.

  • React is better suited for highly dynamic and interactive interfaces

The choice ultimately depends on the specific project needs and your skill set. However, having multiple options for tab implementations is valuable for the overall ecosystem.

Table of Key Aspects of Bootstrap Tabs

TopicDescription
Importance of Tabs<ul><li>Clear categorization </li><li>Space optimization </li><li>Progressive disclosure </li><li>Easy navigation </li></ul>
Base .nav Component<ul><li>Flexbox-based </li><li>Horizontal alignment modifiers </li><li>Vertical stacking </li></ul>
Bootstrap Tabs<ul><li>Add .nav-tabs class </li><li>Alternative pills styling </li></ul>
Fill & Justify<ul><li>``.nav-fill – Proportional filling </li><li>``.nav-justified – Equal-width elements </li></ul>
Flex UtilitiesCreate responsive variations
Accessibilityrole="navigation" attribute
DropdownsIntegrate dropdown menus
Customization<ul><li>Colors </li><li>Borders </li><li>Gradients </li></ul>
Comparison to React Tabs<ul><li>Bootstrap – simpler, less coding </li><li>React – more dynamic, animated </li></ul>

What You Have Learned

In this comprehensive guide, you’ve learned about the powerful navigation components provided by Bootstrap, with a particular focus on tabs. Here is a summary of the key takeaways:

  • Base .nav Component: You’ve learned how to create a basic navigation bar using the .nav component and how to handle the active state using the aria-current attribute.

  • Available Styles: You’ve explored various styles to modify .nav components, including horizontal alignment (centering and right-aligning) and vertical stacking using the .flex-column utility.

  • Introduction to Bootstrap Tabs: You’ve learned how to transform regular navigation into a tabbed interface using the .nav-tabs class.

  • Pills: You’ve been introduced to pills as an alternative to tabs and learned how to create pill-style navigation using the .nav-pills class.

  • Fill and Justify: You’ve learned how to use modifiers like .nav-fill for proportional filling of available space and how to create equal-width elements with .nav-justified.

  • Working with Flex Utilities: You’ve learned how to create responsive navigation variations using Flexbox utilities.

  • Accessibility Considerations: You’ve learned the importance of adding a role=”navigation” attribute for navigation bars to ensure accessibility.

  • Using Dropdowns with Tabs: You’ve learned how to integrate dropdown menus with tabbed navigation to enhance functionality.

This knowledge will empower you to create interactive, accessible, and responsive navigation components in your web projects using Bootstrap. Keep practicing and exploring more features offered by Bootstrap to enhance your front-end development skills. Should you need more references, do check out these videos

Wrap Up

And that wraps up our comprehensive beginner’s guide to implementing tabbed navigation with Bootstrap!

With what you’ve learned, you can now optimize information architecture and improve user experiences in your web projects using tabbed navigation.

Remember, if you need pre-made, responsive tab components for your sites and applications, be sure to leverage Purecode.ai’s vast library of over 10,000 Tailwind CSS, CSS3, and MUI elements. With customizable tab designs just a few clicks away, you can focus on rapidly building instead of repeatedly crafting tab components from scratch.

I hope you feel empowered to start tabbing away in your next Bootstrap project! Continue practicing with Bootstrap’s extensive collection of web UI tools as you build your front-end development expertise.

Emmanuel Uchenna

Emmanuel Uchenna

Emmanuel is an experienced and enthusiastic software developer and technical writer with 4+ proven years of professional experience. He focuses on full-stack web development. He is fluent in React, TypeScript, VueJS, and NodeJS and familiar with industry-standard technologies such as version control, headless CMS, and JAMstack. He is passionate about knowledge sharing.