Tabs
Use the below code to display Tabs :
<div class="news-tab">
<ul class="nav nav-pills mb-3" id="pills-tab02" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-lifestyle-tab" data-bs-toggle="pill" data-bs-target="#pills-lifestyle" type="button" role="tab" aria-controls="pills-lifestyle" aria-selected="false" tabindex="-1">Lifestyle</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-gaming-tab" data-bs-toggle="pill" data-bs-target="#pills-gaming" type="button" role="tab" aria-controls="pills-gaming" aria-selected="true">Sport</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-politics-tab" data-bs-toggle="pill" data-bs-target="#pills-politics" type="button" role="tab" aria-controls="pills-politics" aria-selected="false" tabindex="-1">Politics</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-sport-tab" data-bs-toggle="pill" data-bs-target="#pills-sport" type="button" role="tab" aria-controls="pills-sport" aria-selected="false" tabindex="-1">Technology</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent02">
<div class="tab-pane fade" id="pills-lifestyle" role="tabpanel" aria-labelledby="pills-lifestyle-tab" tabindex="0">
[ TAB CONTENT ]
</div>
<div class="tab-pane fade active show" id="pills-gaming" role="tabpanel" aria-labelledby="pills-gaming-tab" tabindex="0">
[ TAB CONTENT ]
</div>
<div class="tab-pane fade" id="pills-politics" role="tabpanel" aria-labelledby="pills-politics-tab" tabindex="0">
[ TAB CONTENT ]
</div>
<div class="tab-pane fade" id="pills-sport" role="tabpanel" aria-labelledby="pills-sport-tab" tabindex="0">
[ TAB CONTENT ]
</div>
</div>
</div>
Tabs 02
<div class="row">
<div class="col-lg-12">
<nav>
<ul class="nav nav-tabs nav-tabs-02 mb-4" id="myTab2" role="tablist">
<li class="nav-item" role="presentation"> <a class="nav-link active" id="nav-description-tab" data-bs-toggle="tab" href="#nav-description" role="tab" aria-controls="nav-description" aria-selected="true">Description</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-reviews-tab" data-bs-toggle="tab" href="#nav-reviews" role="tab" aria-controls="nav-reviews" aria-selected="false">Reviews</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-custom-tab" data-bs-toggle="tab" href="#nav-custom" role="tab" aria-controls="nav-custom" aria-selected="false">Custom</a>
</li>
</ul>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-description" role="tabpanel" aria-labelledby="nav-description-tab">
[ TAB CONTENT ]
</div>
<div class="tab-pane fade" id="nav-reviews" role="tabpanel" aria-labelledby="nav-reviews-tab">
[ TAB CONTENT ]
</div>
<div class="tab-pane fade" id="nav-custom" role="tabpanel" aria-labelledby="nav-custom-tab">
[ TAB CONTENT ]
</div>
</div>
</div>
</div>
Note Make sure you use unique IDs for each Tab Items and Tab content.