Examples
You can utilize any of the Navs examples to make tabs.
First tab content...
Second tab content...
Third tab content...
<!-- Nav -->
<div class="text-center">
<ul class="nav nav-segment nav-pills scrollbar-horizontal mb-7" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-one-code-features-example1-tab" data-toggle="pill" href="#pills-one-code-features-example1" role="tab" aria-controls="pills-one-code-features-example1" aria-selected="true">App Marketplace</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-two-code-features-example1-tab" data-toggle="pill" href="#pills-two-code-features-example1" role="tab" aria-controls="pills-two-code-features-example1" aria-selected="false">Course</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-three-code-features-example1-tab" data-toggle="pill" href="#pills-three-code-features-example1" role="tab" aria-controls="pills-three-code-features-example1" aria-selected="false">Account Dashboard</a>
</li>
</ul>
</div>
<!-- End Nav -->
<!-- Tab Content -->
<div class="tab-content">
<div class="tab-pane fade show active" id="pills-one-code-features-example1" role="tabpanel" aria-labelledby="pills-one-code-features-example1-tab">
<p>First tab content...</p>
</div>
<div class="tab-pane fade" id="pills-two-code-features-example1" role="tabpanel" aria-labelledby="pills-two-code-features-example1-tab">
<p>Second tab content...</p>
</div>
<div class="tab-pane fade" id="pills-three-code-features-example1" role="tabpanel" aria-labelledby="pills-three-code-features-example1-tab">
<p>Third tab content...</p>
</div>
</div>
<!-- End Tab Content -->
First tab content...
Second tab content...
Third tab content...
<!-- Nav -->
<div class="text-center">
<ul class="nav nav-pills mb-7" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-one-code-features-example2-tab" data-toggle="pill" href="#pills-one-code-features-example2" role="tab" aria-controls="pills-one-code-features-example2" aria-selected="true">App Marketplace</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-two-code-features-example2-tab" data-toggle="pill" href="#pills-two-code-features-example2" role="tab" aria-controls="pills-two-code-features-example2" aria-selected="false">Course</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-three-code-features-example2-tab" data-toggle="pill" href="#pills-three-code-features-example2" role="tab" aria-controls="pills-three-code-features-example2" aria-selected="false">Account Dashboard</a>
</li>
</ul>
</div>
<!-- End Nav -->
<!-- Tab Content -->
<div class="tab-content">
<div class="tab-pane fade show active" id="pills-one-code-features-example2" role="tabpanel" aria-labelledby="pills-one-code-features-example2-tab">
<p>First tab content...</p>
</div>
<div class="tab-pane fade" id="pills-two-code-features-example2" role="tabpanel" aria-labelledby="pills-two-code-features-example2-tab">
<p>Second tab content...</p>
</div>
<div class="tab-pane fade" id="pills-three-code-features-example2" role="tabpanel" aria-labelledby="pills-three-code-features-example2-tab">
<p>Third tab content...</p>
</div>
</div>
<!-- End Tab Content -->