Post
Ask Question

Tablist In Bootstrap 4

Step 1 Create a List Group

To create a list group in Bootstrap 4, we use list-group class and for all the items inside the list group container, we use list-group-item class.

  1. <div class="container">  
  2.     <div class="row">  
  3.         <div class="col-4">  
  4.             <div class="list-group" role="tablist"> <a href="# " class="list-group-item">Home</a> <a href="# " class="list-group-item">Profile</a> <a href="# " class="list-group-item">Settings</a> <a href="# " class="list-group-item">log Out</a> </div>  
  5.         </div>  
  6.     </div>  
  7. </div>  

Run the application
Bootstrap
Step 2 Make the list items toggleable.

In order to make the list items toggleable, we need to add an HTML attribute in all the anchor elements, i.e., data-toggle and set its value to the list.

  1. <div class="container">  
  2.     <div class="row">  
  3.         <div class="col-4">  
  4.             <div class="list-group" role="tablist"> <a href="# " role="tablist" class="list-group-item active" data-toggle="list">Home</a> <a href="# " role="tablist" class="list-group-item" data-toggle="list">Profile</a> <a href="# " role="tablist" class="list-group-item" data-toggle="list">Settings</a> <a href="# " role="tablist" class="list-group-item" data-toggle="list">log Out</a> </div>  
  5.         </div>  
  6.     </div>  
  7. </div>  

Run the application.
Bootstrap

Click on any of the links.
Bootstrap

So, our links are working as expected.

Step 3 Contents for each list items.

Let’s say whenever a user clicks on any of the list items, we want to display the contents in the tab, and in order to make this happen, we need two classes.

  1. Tab-content class
  2. Tab-pane class
  1. <div class="col-8">  
  2.     <div class="tab-content">  
  3.         <div class="tab-pane">Home Panel</div>  
  4.         <div class="tab-pane">Profile Panel</div>  
  5.         <div class="tab-pane">Settings Panel</div>  
  6.         <div class="tab-pane">Logout Panel </div>  
  7.     </div>  

Run the application
Bootstrap

In the output, you will notice that no content is displayed on our Home Section, and this is same for the rest as well.

We need two things to make it work. First, we need to give an id in all the tab-pane sections and in the anchor element, we need to pass the id in the href attribute. So, whenever any of the links is clicked, it will display the content of panel whose id matches with the href value of anchor element.

  1. <div class="container">  
  2.     <div class="row">  
  3.         <div class="col-4">  
  4.             <div class="list-group" role="tablist"> <a href="#home" role="tablist" class="list-group-item active" data-toggle="list">Home</a> <a href="#profile" role="tablist" class="list-group-item" data-toggle="list">Profile</a> <a href="#settings" role="tablist" class="list-group-item" data-toggle="list">Settings</a> <a href="#logout" role="tablist" class="list-group-item" data-toggle="list">log Out</a> </div>  
  5.         </div>  
  6.         <div class="col-8">  
  7.             <div class="tab-content">  
  8.                 <div class="tab-pane" id="home">Home Panel</div>  
  9.                 <div class="tab-pane" id="profile">Profile Panel</div>  
  10.                 <div class="tab-pane" id="settings">Settings Panel</div>  
  11.                 <div class="tab-pane" id="logout">Logout Panel </div>  
  12.             </div>  
  13.         </div>  
  14.     </div>  
  15. </div>  

Run the application
Bootstrap

You will notice that again, nothing is displayed in the home section. But when we click on any other link, you will see the content.

Bootstrap

Bootstrap

In order to solve this problem, we need to add a bootstrap class “active” in the home content tab pane.

Run the application.

Bootstrap

So, in this article, we saw how easy it is to create a tablist. I hope you liked it.


Similar Articles