Tabs
Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with our tab JavaScript plugin.
Tabs SVG Icon
Tabs with svg icons
<ul class="row text-center g-0 tab-profile nav nav-tabs border-bottom-0" id="nav-tab" role="tablist">
<li class="col-6 col-lg-3">
<a class="rounded-0 active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">
<!-- navigate block -->
<div class="p-4 p-lg-5">
<div class="mb-2 text-primary">
<!-- icon -->
<svg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 512 512'><path stroke="currentColor" d='M80,212V448a16,16,0,0,0,16,16h96V328a24,24,0,0,1,24-24h80a24,24,0,0,1,24,24V464h96a16,16,0,0,0,16-16V212' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><path stroke="currentColor" d='M480,256,266.89,52c-5-5.28-16.69-5.34-21.78,0L32,256' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><polyline stroke="currentColor" points='400 179 400 64 352 64 352 133' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg>
</div>
<h4 class="h5 mb-0">Home</h4>
</div><!-- end navigate block -->
</a>
</li>
<li class="col-6 col-lg-3">
<a class="rounded-0" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">
<!-- navigate block -->
<div class="p-4 p-lg-5">
<div class="mb-2 text-primary">
<!-- icon -->
<svg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 512 512'><rect stroke="currentColor" x='96' y='48' width='320' height='416' rx='48' ry='48' style='fill:none;stroke-linejoin:round;stroke-width:32px'/><line stroke="currentColor" x1='176' y1='128' x2='336' y2='128' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line stroke="currentColor" x1='176' y1='208' x2='336' y2='208' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line stroke="currentColor" x1='176' y1='288' x2='256' y2='288' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg>
</div>
<h4 class="h5 mb-0">Services</h4>
</div><!-- end navigate block -->
</a>
</li>
<li class="col-6 col-lg-3">
<a class="rounded-0" id="nav-portfolio-tab" data-bs-toggle="tab" href="#nav-portfolio" role="tab" aria-controls="nav-portfolio" aria-selected="false">
<!-- navigate block -->
<div class="p-4 p-lg-5">
<div class="mb-2 text-primary">
<!-- icon -->
<svg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 512 512'><path stroke="currentColor" d='M440,432H72a40,40,0,0,1-40-40V120A40,40,0,0,1,72,80h75.89a40,40,0,0,1,22.19,6.72l27.84,18.56A40,40,0,0,0,220.11,112H440a40,40,0,0,1,40,40V392A40,40,0,0,1,440,432Z' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line stroke="currentColor" x1='32' y1='192' x2='480' y2='192' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg>
</div>
<h4 class="h5 mb-0">Portfolio</h4>
</div><!-- end navigate block -->
</a>
</li>
<li class="col-6 col-lg-3">
<a class="rounded-0" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">
<!-- navigate block -->
<div class="p-4 p-lg-5">
<div class="mb-2 text-primary">
<!-- icon -->
<svg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 512 512'><rect stroke="currentColor" x='48' y='96' width='416' height='320' rx='40' ry='40' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><polyline stroke="currentColor" points='112 160 256 272 400 160' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg>
</div>
<h4 class="h5 mb-0">Contact</h4>
</div><!-- end navigate block -->
</a>
</li>
</ul>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
tabs one
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
tabs two
</div>
<div class="tab-pane fade" id="nav-portfolio" role="tabpanel" aria-labelledby="nav-portfolio-tab">
tabs three
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
tabs four
</div>
</div>
You can read full documentation about tabs in Bootstrap Documentation