Tabs
Default Tabs
Best Clean Tab ever
you can use it with the small code
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.
Clean Tab ever
you can use it with the small code
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.
Best Tab ever
you can use it with the small code
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#home" role="tab" aria-selected="false" tabindex="-1">
<span>Tab 1</span>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#profile" role="tab" aria-selected="false" tabindex="-1">
<span>Tab 2</span>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link active" data-bs-toggle="tab" href="#messages" role="tab" aria-selected="true">
<span>Tab 3</span>
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane" id="home" role="tabpanel">
<div class="py-3">
<h3>Best Clean Tab ever</h3>
<h4>you can use it with the small code</h4>
<p class="mb-0">
Donec pede justo, fringilla vel, aliquet nec,
vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a.
</p>
</div>
</div>
<div class="tab-pane py-3" id="profile" role="tabpanel">
<h3>Clean Tab ever</h3>
<h4>you can use it with the small code</h4>
<p class="mb-0">
Donec pede justo, fringilla vel, aliquet nec,
vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a.
</p>
</div>
<div class="tab-pane py-3 active show" id="messages" role="tabpanel">
<h3>Best Tab ever</h3>
<h4>you can use it with the small code</h4>
<p class="mb-0">
Donec pede justo, fringilla vel, aliquet nec,
vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a.
</p>
</div>
</div>
Tabs Vertical Left
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.Probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.
Probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.Probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.
<div class="row">
<div class="col-sm-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade active show" id="v-pills-home2" role="tabpanel" aria-labelledby="v-pills-home-tab2">
<p>
Raw denim you probably haven't heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua,
retro synth master cleanse. Mustache cliche
tempor, williamsburg carles vegan helvetica.
</p>
Raw denim you probably haven't heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica.
</div>
<div class="tab-pane fade" id="v-pills-profile2" role="tabpanel" aria-labelledby="v-pills-profile-tab2">
<p>
Probably haven't heard of them jean shorts Austin.
Nesciunt tofu stumptown aliqua, retro synth master
cleanse. Mustache cliche tempor, williamsburg
carles vegan helvetica.
</p>
<p>
Probably haven't heard of them jean shorts Austin.
Nesciunt tofu stumptown aliqua, retro synth master
cleanse. Mustache cliche tempor, williamsburg
carles vegan helvetica.
</p>
</div>
<div class="tab-pane fade" id="v-pills-messages2" role="tabpanel" aria-labelledby="v-pills-messages-tab2">
<p>
Raw denim you probably haven't heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua,
retro synth master cleanse. Mustache cliche
tempor, williamsburg carles vegan helvetica.
</p>
Raw denim you probably haven't heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica.
</div>
<div class="tab-pane fade" id="v-pills-settings2" role="tabpanel" aria-labelledby="v-pills-settings-tab2">
<p>
Probably haven't heard of them jean shorts Austin.
Nesciunt tofu stumptown aliqua, retro synth master
cleanse. Mustache cliche tempor, williamsburg
carles vegan helvetica.
</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2 mt-sm-0">
<!-- Nav tabs -->
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab2" data-bs-toggle="pill" href="#v-pills-home2" role="tab" aria-controls="v-pills-home2" aria-selected="true">
Home
</a>
<a class="nav-link" id="v-pills-profile-tab2" data-bs-toggle="pill" href="#v-pills-profile2" role="tab" aria-controls="v-pills-profile2" aria-selected="false" tabindex="-1">
Profile
</a>
<a class="nav-link" id="v-pills-messages-tab2" data-bs-toggle="pill" href="#v-pills-messages2" role="tab" aria-controls="v-pills-messages2" aria-selected="false" tabindex="-1">
Messages
</a>
<a class="nav-link" id="v-pills-settings-tab2" data-bs-toggle="pill" href="#v-pills-settings2" role="tab" aria-controls="v-pills-settings2" aria-selected="false" tabindex="-1">
Settings
</a>
</div>
</div>
</div>
Tabs Bordered Justified
<ul class="nav nav-pills nav-fill" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#navpill-111" role="tab" aria-selected="false" tabindex="-1">
<span>Tab 1</span>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link active" data-bs-toggle="tab" href="#navpill-222" role="tab" aria-selected="true">
<span>Tab 2</span>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#navpill-333" role="tab" aria-selected="false" tabindex="-1">
<span>Tab 3</span>
</a>
</li>
</ul>
<div class="tab-content border mt-2">
<div class="tab-pane p-3" id="navpill-111" role="tabpanel">
<div class="row align-items-center">
<div class="col-sm-3">
<img src="~/Modernize/images/profile/user-1.jpg" alt="" class="img-fluid">
</div>
<div class="col-sm-9">
<p>
Raw denim you probably haven't heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua,
retro synth master cleanse. Mustache cliche
tempor, williamsburg carles vegan helvetica.
</p>
</div>
</div>
</div>
<div class="tab-pane p-3 active show" id="navpill-222" role="tabpanel">
<div class="row align-items-center">
<div class="col-sm-9">
<p>
Raw denim you probably haven't heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua,
retro synth master cleanse. Mustache cliche
tempor, williamsburg carles vegan helvetica.
</p>
</div>
<div class="col-sm-3">
<img src="~/Modernize/images/profile/user-2.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
<div class="tab-pane p-3" id="navpill-333" role="tabpanel">
<div class="row align-items-center">
<div class="col-sm-3">
<img src="~/Modernize/images/profile/user-3.jpg" alt="" class="img-fluid">
</div>
<div class="col-sm-9">
<p>
Raw denim you probably haven't heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua,
retro synth master cleanse. Mustache cliche
tempor, williamsburg carles vegan helvetica.
</p>
</div>
</div>
</div>
</div>