Bootstrap Tabs and Pills
Bootstrap Tabs and Pills
Bootstrap is a popular front-end framework that makes it easy to create responsive and mobile-first websites. One of the many components that Bootstrap offers is tabs and pills, which allow you to create interactive navigation menus that can be used to display different types of content on the same page.
Here are some examples of how to use Bootstrap tabs and pills:
Tabs
Tabs are a great way to organize content into different sections on a single page. Each tab contains a different set of content, which is displayed when the tab is clicked.
<ul class="nav nav-tabs">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>Home</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="profile" class="tab-pane fade">
<h3>Profile</h3>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="messages" class="tab-pane fade">
<h3>Messages</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="settings" class="tab-pane fade">
<h3>Settings</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
In this example, we have a list of tabs that are created using an unordered list with the class nav-tabs. Each tab is represented by a list item, and the active class is added to the first list item to make it the default active tab. When a tab is clicked, the corresponding content is displayed using the tab-content container and the tab-pane class for each tab content.
Pills
Pills are similar to tabs, but they are displayed horizontally and can be used to represent different categories of content. Each pill can be clicked to display the content associated with that category.
<ul class="nav nav-pills">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>Home</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="profile" class="tab-pane fade">
<h3>Profile</h3>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="messages" class="tab-pane fade">
<h3>Messages</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="settings" class="tab-pane fade">
<h3>Settings</h3>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>