In web development, user-friendly navigation and a visually appealing layout are crucial for engaging and retaining website visitors. Horizontal tabs are a popular choice for organizing content in an easily accessible manner, and Bootstrap 4 simplifies the process of creating these tabs. In this blog post, we'll explore how to design sleek horizontal tabs using Bootstrap 4.
HTML Structure
<div class="container mt-4">
<ul class="nav nav-tabs">
<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>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab3">Tab 3</a>
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane active">
<h3>Tab 1 Content</h3>
<p>This is the content of Tab 1.</p>
</div>
<div id="tab2" class="tab-pane">
<h3>Tab 2 Content</h3>
<p>This is the content of Tab 2.</p>
</div>
<div id="tab3" class="tab-pane">
<h3>Tab 3 Content</h3>
<p>This is the content of Tab 3.</p>
</div>
</div>
</div>
Comments
Post a Comment