Bootstrap Tabs
You will discover in this article how to use the Bootstrap tabs plugins to build dynamic tabs that may switch between the content.
Creating Tabs with Bootstrap
Tab-based navigation is an effective way to manage a large amount of content within a confined space by dividing it into separate panes, each viewable individually.
Users can easily access the content by switching between these panes without having to leave the page. The Bootstrap tab component allows you to create such tab-based navigation efficiently.
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Downloads</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Documents</a>
</li>
</ul>
The tabs plugin also works seamlessly with pills nav. To create a pill nav, you simply replace the class .nav-tabs with .nav-pills in the tab markup.
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Profile</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Messages</a>
</li>
</ul>
Creating Dynamic Tabs via Data Attributes
You can activate tab or pill navigation without the need for JavaScript code by specifying data-bs-toggle=tab on each tab or data-bs-toggle=pill on each pill. Additionally, create a .tab-pane with a unique ID for every tab and wrap them in .tab-content.
Take a look at the example to understand how to create dynamic tabs using data attributes.
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
<a href="#home" class="nav-link active" data-bs-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a href="#profile" class="nav-link" data-bs-toggle="tab">Profile</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="home">
<h4 class="mt-2">Home tab content</h4>
</div>
<div class="tab-pane fade" id="profile">
<h4 class="mt-2">Profile tab content</h4>
</div>
</div>
Tip: The .fade class is applied to each .tab-pane to enable fading transitions while showing new tab content. It's essential to add the .active class to a .nav-link and the .show and .active classes to the corresponding .tab-pane to make it initially visible.
Creating Dynamic Tabs via JavaScript
Tabs can also be enabled with JavaScript. It is necessary to separately activate each tab.
<script>
$(document).ready(function () {
$("#myTab a").click(function (e) {
e.preventDefault();
$(this).tab("show");
});
});
</script>
<ul class="nav nav-pills" id="myTab">
<li class="nav-item">
<a href="#home" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#profile" class="nav-link">Profile</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="home">
<h4 class="mt-2">Home tab content</h4>
</div>
<div class="tab-pane fade" id="profile">
<h4 class="mt-2">Profile tab content</h4>
</div>
</div>
There are numerous ways to activate certain tabs. Let's examine the subsequent illustration:
<script>
$(document).ready(function(){
$("#myTab li:eq(1) a").tab("show"); // show second tab (0-indexed, like an array)
});
</script>
Bootstrap Tab Methods
The typical bootstrap tabs approach looks like this:
show
opens the appropriate window and activates the specified tabs. Any additional tabs that were previously chosen become unselected, and their corresponding panes are hidden.
<script>
$(document).ready(function () {
$("#myTab a:last").tab("show"); // show last tab
});
</script>
Bootstrap Tab Events
To improve the functioning of the tabs, these are the typical Bootstrap events.
show.bs.tab: The new tabs is not yet displayed when this event occurs, which occurs on tabs show. In order to target the current tabs and the preceding active tabs (if available), you may utilise theevent.targetandevent.relatedTargettags, respectively.shown.bs.tab: After a tab has been presented, this event occurs on tabs show. The current tabs and the preceding active tabs (if available) may be targeted using theevent.targetandevent.relatedTargettags, respectively.hide.bs.tab: When a fresh tab is to be displayed and the currently active tabs is to be hidden, this event is triggered. To target the now active tabs and the new tabs that will become active shortly, respectively, utilise theevent.targetandevent.relatedTargettags.hidden.bs.tab: This happens once a fresh tab is displayed and the old active tabs is hidden. The previous active tab may be targeted using theevent.targetand the new active tabs can be targeted using theevent.relatedTarget.
The following example displays the names of the active tab and the previous tab to the user once the transition of a tab has been fully completed.
<script>
$(document).ready(function () {
$('a[data-bs-toggle="tab"]').on("shown.bs.tab", function (e) {
var activeTab = $(e.target).text(); // Get the name of active tab
var previousTab = $(e.relatedTarget).text(); // Get the name of previous active tab
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});
</script>
FAQ
What are Bootstrap Tabs?
Bootstrap Tabs are a user interface component provided by the Bootstrap framework, which is a popular front-end development framework. Tabs allow you to organize content into multiple sections that can be switched between by clicking on the respective tab headers. This is commonly used to display different categories of content within the same container, saving space and improving user experience.
How do you create Bootstrap Tabs?
Create the HTML structure for your tabs. Each tab is usually composed of tab headers and corresponding tab content.
<div class="container">
<ul class="nav nav-tabs" id="myTabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab1">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab2">Tab 2</a>
</li>
<!-- Add more tab headers if needed -->
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab1">
<p>This is the content of Tab 1.</p>
</div>
<div class="tab-pane fade" id="tab2">
<p>This is the content of Tab 2.</p>
</div>
<!-- Add more tab content panes if needed -->
</div>
</div>
Use JavaScript to initialize the tabs. This enables the tab switching functionality.
<script>
$(document).ready(function () {
$('#myTabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
});
</script>
Can I customize the appearance of Bootstrap Tabs?
Yes, you can customize the appearance of Bootstrap Tabs to match your project's design. Bootstrap provides various CSS classes that you can modify or override to achieve the desired styling. You can change colors, fonts, borders, and more using your own CSS rules.
Are Bootstrap Tabs responsive?
Yes, Bootstrap Tabs are responsive by default. When the screen size is reduced, the tabs might collapse into a dropdown menu or be styled differently based on your chosen Bootstrap theme and customizations. This ensures that tabs remain usable and visually appealing across different devices and screen sizes.
How can I set a default active tab when the page loads?
To set a default active tab when the page loads, you can add the active class to the tab header and content pane that you want to be active. For example:
<div class="tab-pane fade show active" id="tab1">
<p>This is the content of Tab 1.</p>
</div>
In this example, active class is added to both the first tab header and the first tab content pane, making Tab 1 the default active tab when the page loads.
Can I disable certain tabs in Bootstrap Tabs?
Yes, you can disable certain tabs in Bootstrap Tabs by adding the disabled class to the tab header and content. Disabled tabs are unclickable and appear grayed out. Here's how you can do it:
<div class="container">
<ul class="nav nav-tabs" id="myTabs">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab1">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#tab2">Tab 2 (Disabled)</a>
</li>
</ul>
</div>
In this example, Tab 2 is disabled and cannot be clicked.
Can I use icons in Bootstrap Tabs?
Yes, you can use icons in Bootstrap Tabs by adding icon elements (e.g., <i>) within the tab headers. You can use popular icon libraries like Font Awesome or Bootstrap Icons for this purpose. Here's an example using Font Awesome:
<div class="container">
<ul class="nav nav-tabs" id="myTabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab1"><i class="fas fa-home"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab2"><i class="fas fa-user"></i> Profile</a>
</li>
</ul>
</div>
In this example, Font Awesome icons are used alongside the tab labels.
Are there any events associated with Bootstrap Tabs?
Yes, Bootstrap Tabs provide event hooks that you can use to perform actions when specific events occur. For example, you can use the shown.bs.tab event to execute code when a tab becomes active and is fully shown. Here's how you might use it:
<script>
$(document).ready(function () {
$('#myTabs a').on('shown.bs.tab', function (e) {
var activeTab = $(e.target).attr('href'); // Get the href of the newly activated tab
console.log('Tab ' + activeTab + ' is now active.');
// Perform additional actions based on the active tab
});
});
</script>
Can I nest Bootstrap Tabs inside each other?
Bootstrap Tabs are not designed to be nested directly inside each other. Nesting tabs can lead to confusing user experiences and layout issues. If you need to organize content hierarchically, consider using different UI components or design patterns that are better suited for nesting, such as accordions or collapsible panels.
How can I add animations or transitions to Bootstrap Tabs?
You can add animations or transitions to Bootstrap Tabs by utilizing CSS classes and custom styles. Bootstrap doesn't provide built-in animations, but you can use CSS transitions or third-party animation libraries to achieve this effect. Here's an example of how you might add a fade-in transition:
/* Custom CSS for tab content transitions */
.tab-content .tab-pane {
opacity: 0; /* Start with opacity 0 */
transition: opacity 0.3s ease-in-out; /* Add a smooth transition */
}
.tab-content .tab-pane.active {
opacity: 1; /* Change opacity to 1 for active tab */
}
With this CSS, the tab content will fade in and out when tabs are switched.
How can I add a close button to tabs for removal?
Adding a close button to tabs for removal is not a built-in feature in Bootstrap Tabs, but you can achieve this with some additional HTML and JavaScript. Here's a basic example of how you might implement it:
<div class="container">
<ul class="nav nav-tabs" id="myTabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab1">Tab 1</a>
<button class="close-tab-btn" data-tab="#tab1">&times;</button>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab2">Tab 2</a>
<button class="close-tab-btn" data-tab="#tab2">&times;</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab1">
<p>This is the content of Tab 1.</p>
</div>
<div class="tab-pane fade" id="tab2">
<p>This is the content of Tab 2.</p>
</div>
</div>
</div>
<script>
$(document).ready(function () {
// Close tab when close button is clicked
$('.close-tab-btn').on('click', function () {
var tabId = $(this).data('tab');
$(tabId).remove();
$(this).closest('.nav-item').remove();
// Activate the next tab if available
$('#myTabs a:first').tab('show');
});
});
</script>
In this example, a close button is added to each tab header. When the close button is clicked, the associated tab content and tab header are removed, and the next available tab is activated.
How can I create vertical tabs instead of horizontal tabs?
Bootstrap provides horizontal tabs by default, but you can create vertical tabs by applying custom CSS. Here's an example:
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav flex-column nav-tabs" id="myTabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab1">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab2">Tab 2</a>
</li>
</ul>
</div>
<div class="col-md-9">
<div class="tab-content">
<div class="tab-pane fade show active" id="tab1">
<p>This is the content of Tab 1.</p>
</div>
<div class="tab-pane fade" id="tab2">
<p>This is the content of Tab 2.</p>
</div>
</div>
</div>
</div>
</div>
In this example, the flex-column class is applied to the nav element to create a vertical layout for the tabs.
How can I create a responsive layout for Bootstrap Tabs on small screens?
Bootstrap Tabs are responsive by default, but you can enhance their responsiveness further by using responsive classes. For example, you might want to stack tabs vertically on small screens. You can achieve this by applying the flex-column class to the nav element:
<ul class="nav nav-tabs flex-column" id="myTabs">
<!-- Tab headers -->
</ul>
On small screens, the tab headers will stack vertically instead of horizontally.
How can I add badges to Bootstrap Tabs for notifications or counts?
You can add badges to Bootstrap Tabs to display notifications, counts, or any other contextual information. Here's how you can do it:
<div class="container">
<ul class="nav nav-tabs" id="myTabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab1">Tab 1 <span class="badge badge-info">3</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab2">Tab 2 <span class="badge badge-danger">New</span></a>
</li>
</ul>
</div>
In this example, the <span> element with the Bootstrap badge classes is added within the tab anchor to display the badges.
Conclusion
Bootstrap Tabbed Navigation serves as a robust and flexible solution for organizing content within web interfaces. The framework's commitment to responsive design and dynamic functionality is evident in its Dynamic Tab Components and Responsive Tab Design, ensuring an optimal user experience across devices.
The versatility of Tab Switching allows for seamless navigation, creating an interactive and user-friendly interface. Coupled with a Stylish Tabbed Layout, Bootstrap Tabs offer an aesthetically pleasing presentation that aligns with modern design standards.
The diverse range of Tab Navigation Options, including the use of Pill Tabs and support for Multilevel Tab Structures, provides developers with the tools to create structured and organized content layouts. The inclusion of Animated Tab Transitions enhances the visual appeal, contributing to a more engaging user experience.
Beyond standard tab features, the ability for Dynamic Tab Creation through JavaScript adds a layer of interactivity. This functionality allows developers to Programmatically Generate Tabs, adapting the interface dynamically to suit various requirements.
The incorporation of Vertical Tab Implementation and Customizable Vertical Tabs expands the possibilities for layout design, offering an alternative orientation for more creative and space-efficient displays. Tabs with Icon Integration further enhance the visual richness, creating a more intuitive and appealing navigation experience.
The capability for Dynamic Loading of Tab Content allows for the efficient presentation of information, enabling content to be loaded on-demand, leading to improved performance. This, combined with the use of Tabs with Symbolic Icons, provides an interactive and dynamic feel to the user interface.