Bootstrap 5 Nav Tabs Onclick Event
Bootstrap 5 Nav Tabs open and closed by Bootstrap JavaScript behavior Onclick Event. Responsive Bootstrap tabs horizontally show hide content.
Bootstrap Tabs with pills
The tabs plugin also works with pills by using the .nav-fill class in the anchor tag, then the tabs nav looks like a button.
Bootstrap Nav & Tabs Full Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>How To Create Bootstrap 5 Nav Tabs Onclick Event</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://www.markuptag.com/bootstrap/5/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<h3 class="mb-3 mt-5">Choose Plan</h3>
<div class="choose-plan bg-primary text-white p-3 float-left">
<!-- Nav tabs -->
<ul class="nav nav-tabs bg-light" role="tablist">
<li class="nav-item">
<a class="nav-link text-danger active" data-bs-toggle="tab" href="#basic"><b>Basic</b></a>
</li>
<li class="nav-item">
<a class="nav-link text-danger" data-bs-toggle="tab" href="#standard"><b>Standard</b></a>
</li>
<li class="nav-item">
<a class="nav-link text-danger" data-bs-toggle="tab" href="#premium"><b>Premium</b></a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="basic" class="container tab-pane active">
<p class="mt-3">Convert unique PSD/Sketch Homepage design to Responsive Bootstrap HTML/CSS with 3 rounds of revision</p>
<hr>
<ul>
<li>2 Page</li>
<li>Responsive Design</li>
<li>Slider/Scroller</li>
<li>Server Upload</li>
<li>Browser Compatibility</li>
</ul>
<hr />
<button class="btn btn-light float-right">Continue</button>
</div>
<div id="standard" class="container tab-pane fade">
<p class="mt-3">Home + 1 inner page PSD/Sketch design to Responsive Bootstrap HTML/CSS with 3 rounds of revisions</p>
<hr>
<ul>
<li>5 Page</li>
<li>Responsive Design</li>
<li>Slider/Scroller</li>
<li>Server Upload</li>
<li>Browser Compatibility</li>
</ul>
<hr />
<button class="btn btn-light float-right">Continue</button>
</div>
<div id="premium" class="container tab-pane fade">
<p class="mt-3">Home + 3 inner pages PSD/Sketch design to Responsive Bootstrap HTML/CSS with 3 rounds of revisions</p>
<hr>
<ul>
<li>10 Page</li>
<li>Responsive Design</li>
<li>Slider/Scroller</li>
<li>Server Upload</li>
<li>Browser Compatibility</li>
</ul>
<hr>
<button class="btn btn-light float-right">Continue</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://www.markuptag.com/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>
</html>