Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
<ul class="nav mb-3">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#first">First</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#second">Second</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#third">Third</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="first">
<p>Text..</p>
</div>
<div class="tab-pane fade" id="second">
<p>Text..</p>
</div>
<div class="tab-pane fade" id="third">
<p>Text..</p>
</div>
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
<ul class="nav nav-tabs mb-3">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#first">First</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#second">Second</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#third">Third</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="first">
<p>Text..</p>
</div>
<div class="tab-pane fade" id="second">
<p>Text..</p>
</div>
<div class="tab-pane fade" id="third">
<p>Text..</p>
</div>
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
<ul class="nav nav-pills mb-3">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#first">First</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#second">Second</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#third">Third</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="first">
<p>Text..</p>
</div>
<div class="tab-pane fade" id="second">
<p>Text..</p>
</div>
<div class="tab-pane fade" id="third">
<p>Text..</p>
</div>
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
<ul class="nav tabs mb-3">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#first">First</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#second">Second</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#third">Third</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="first">
<p>Text..</p>
</div>
<div class="tab-pane fade" id="second">
<p>Text..</p>
</div>
<div class="tab-pane fade" id="third">
<p>Text..</p>
</div>
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
<ul class="nav nav-custom mb-3">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#first">First</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#second">Second</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#third">Third</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="first">
<p>Text..</p>
</div>
<div class="tab-pane fade" id="second">
<p>Text..</p>
</div>
<div class="tab-pane fade" id="third">
<p>Text..</p>
</div>
</div>
Click here to learn more about Bootstrap Tabs.