Basic example
Tab 1 content
Tab 2 content
Tab 3 content
Tab 4 disabled
<ul class="nav nav-pills flex flex-col md:flex-row flex-wrap list-none pl-0 mb-4" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<a href="#pills-home" class="
nav-link
block
font-medium
text-xs
leading-tight
uppercase
rounded
px-6
py-3
my-2
md:mr-2
focus:outline-none focus:ring-0
active
" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" role="tab" aria-controls="pills-home"
aria-selected="true">Home</a>
</li>
<li class="nav-item" role="presentation">
<a href="#pills-profile" class="
nav-link
block
font-medium
text-xs
leading-tight
uppercase
rounded
px-6
py-3
my-2
md:mx-2
focus:outline-none focus:ring-0
" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" role="tab"
aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a href="#pills-contact" class="
nav-link
block
font-medium
text-xs
leading-tight
uppercase
rounded
px-6
py-3
my-2
md:mx-2
focus:outline-none focus:ring-0
" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" role="tab"
aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
<li class="nav-item" role="presentation">
<a href="#pills-disabled" class="
nav-link
disabled
pointer-events-none
block
font-medium
text-xs
leading-tight
uppercase
rounded
px-6
py-3
my-2
md:ml-2
focus:outline-none focus:ring-0
" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" role="tab"
aria-controls="pills-disabled" aria-selected="false">Disabled</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
Tab 1 content
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
Tab 2 content
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
Tab 3 content
</div>
<div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab">
Tab 4 disabled
</div>
</div>
Fill
Tab 1 content fill
Tab 2 content fill
Tab 3 content fill
<ul class="nav nav-pills flex flex-col md:flex-row list-none pl-0 mb-4" id="pills-tabFill" role="tablist">
<li class="nav-item flex-auto text-center my-2 md:mr-2" role="presentation">
<a href="#pills-homeFill" class="
nav-link
w-full
block
font-medium
text-xs
leading-tight
uppercase
rounded
px-6
py-3
focus:outline-none focus:ring-0
active
" id="pills-home-tabFill" data-bs-toggle="pill" data-bs-target="#pills-homeFill" role="tab"
aria-controls="pills-homeFill" aria-selected="true">Home</a>
</li>
<li class="nav-item flex-auto text-center my-2 md:mx-2" role="presentation">
<a href="#pills-profileFill" class="
nav-link
w-full
block
font-medium
text-xs
leading-tight
uppercase
rounded
px-6
py-3
focus:outline-none focus:ring-0
" id="pills-profile-tabFill" data-bs-toggle="pill" data-bs-target="#pills-profileFill" role="tab"
aria-controls="pills-profileFill" aria-selected="false">Much longer nav link</a>
</li>
<li class="nav-item flex-auto text-center my-2 md:ml-2" role="presentation">
<a href="#pills-contactFill" class="
nav-link
w-full
block
font-medium
text-xs
leading-tight
uppercase
rounded
px-6
py-3
focus:outline-none focus:ring-0
" id="pills-contact-tabFill" data-bs-toggle="pill" data-bs-target="#pills-contactFill" role="tab"
aria-controls="pills-contactFill" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContentFill">
<div class="tab-pane fade show active" id="pills-homeFill" role="tabpanel" aria-labelledby="pills-home-tabFill">
Tab 1 content fill
</div>
<div class="tab-pane fade" id="pills-profileFill" role="tabpanel" aria-labelledby="pills-profile-tabFill">
Tab 2 content fill
</div>
<div class="tab-pane fade" id="pills-contactFill" role="tabpanel" aria-labelledby="pills-contact-tabFill">
Tab 3 content fill
</div>
</div>
Justify
Tab 1 content justify
Tab 2 content justify
Tab 3 content justify
<ul class="nav nav-pills nav-justified flex flex-col md:flex-row flex-wrap list-none pl-0 mb-4"
id="pills-tabJustify" role="tablist">
<li class="nav-item flex-grow text-center my-2 md:mr-2" role="presentation">
<a href="#pills-homeJustify" class="
nav-link
w-full
block
font-medium
text-xs
leading-tight
uppercase
rounded
px-6
py-3
focus:outline-none focus:ring-0
active
" id="pills-home-tabJustify" data-bs-toggle="pill" data-bs-target="#pills-homeJustify" role="tab"
aria-controls="pills-homeJustify" aria-selected="true">Home</a>
</li>
<li class="nav-item flex-grow text-center my-2 md:mx-2" role="presentation">
<a href="#pills-profileJustify" class="
nav-link
w-full
block
font-medium
text-xs
leading-tight
uppercase
rounded
px-6
py-3
focus:outline-none focus:ring-0
" id="pills-profile-tabJustify" data-bs-toggle="pill" data-bs-target="#pills-profileJustify" role="tab"
aria-controls="pills-profileJustify" aria-selected="false">Much longer nav link</a>
</li>
<li class="nav-item flex-grow text-center my-2 md:ml-2" role="presentation">
<a href="#pills-contactJustify" class="
nav-link
w-full
block
font-medium
text-xs
leading-tight
uppercase
rounded
px-6
py-3
focus:outline-none focus:ring-0
" id="pills-contact-tabJustify" data-bs-toggle="pill" data-bs-target="#pills-contactJustify" role="tab"
aria-controls="pills-contactJustify" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContentJustify">
<div class="tab-pane fade show active" id="pills-homeJustify" role="tabpanel"
aria-labelledby="pills-home-tabJustify">
Tab 1 content justify
</div>
<div class="tab-pane fade" id="pills-profileJustify" role="tabpanel" aria-labelledby="pills-profile-tabJustify">
Tab 2 content justify
</div>
<div class="tab-pane fade" id="pills-contactJustify" role="tabpanel" aria-labelledby="pills-contact-tabJustify">
Tab 3 content justify
</div>
</div>
Vertical
Tab 1 content vertical
Tab 2 content vertical
Tab 3 content vertical
<div class="flex items-start">
<ul class="nav nav-pills flex flex-col flex-wrap list-none pl-0 mr-4" id="pills-tabVertical" role="tablist">
<li class="nav-item flex-grow text-center mb-2" role="presentation">
<a href="#pills-homeVertical" class="
nav-link
block
font-medium
text-xs
leading-tight
uppercase
rounded
px-6
py-3
focus:outline-none focus:ring-0
active
" id="pills-home-tabVertical" data-bs-toggle="pill" data-bs-target="#pills-homeVertical" role="tab"
aria-controls="pills-homeVertical" aria-selected="true">Home</a>
</li>
<li class="nav-item flex-grow text-center my-2" role="presentation">
<a href="#pills-profileVertical" class="
nav-link
block
font-medium
text-xs
leading-tight
uppercase
rounded
px-6
py-3
focus:outline-none focus:ring-0
" id="pills-profile-tabVertical" data-bs-toggle="pill" data-bs-target="#pills-profileVertical" role="tab"
aria-controls="pills-profileVertical" aria-selected="false">Profile</a>
</li>
<li class="nav-item flex-grow text-center my-2" role="presentation">
<a href="#pills-contactVertical" class="
nav-link
block
font-medium
text-xs
leading-tight
uppercase
rounded
px-6
py-3
focus:outline-none focus:ring-0
" id="pills-contact-tabVertical" data-bs-toggle="pill" data-bs-target="#pills-contactVertical" role="tab"
aria-controls="pills-contactVertical" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContentVertical">
<div class="tab-pane fade show active" id="pills-homeVertical" role="tabpanel"
aria-labelledby="pills-home-tabVertical">
Tab 1 content vertical
</div>
<div class="tab-pane fade" id="pills-profileVertical" role="tabpanel"
aria-labelledby="pills-profile-tabVertical">
Tab 2 content vertical
</div>
<div class="tab-pane fade" id="pills-contactVertical" role="tabpanel"
aria-labelledby="pills-contact-tabVertical">
Tab 3 content vertical
</div>
</div>
</div>
Pills with buttons
Tab 1 content button version
Tab 2 content button version
Tab 3 content button version
<ul class="nav nav-pills flex flex-col md:flex-row flex-wrap list-none pl-0 mb-4" id="pills-tab3" role="tablist">
<li class="nav-item" role="presentation">
<button type="button" class="
nav-link
block
font-medium
text-xs
leading-tight
uppercase
rounded
w-full
md:w-auto
px-6
py-3
my-2
md:mr-2
focus:outline-none focus:ring-0
active
" id="pills-home-tab3" data-bs-toggle="pill" data-bs-target="#pills-home3" role="tab" aria-controls="pills-home3"
aria-selected="true">
Home
</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" class="
nav-link
block
font-medium
text-xs
leading-tight
uppercase
rounded
w-full
md:w-auto
px-6
py-3
my-2
md:mx-2
focus:outline-none focus:ring-0
" id="pills-profile-tab3" data-bs-toggle="pill" data-bs-target="#pills-profile3" role="tab"
aria-controls="pills-profile3" aria-selected="false">
Profile
</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" class="
nav-link
block
font-medium
text-xs
leading-tight
uppercase
rounded
w-full
md:w-auto
px-6
py-3
my-2
md:ml-2
focus:outline-none focus:ring-0
" id="pills-contact-tab3" data-bs-toggle="pill" data-bs-target="#pills-contact3" role="tab"
aria-controls="pills-contact3" aria-selected="false">
Contact
</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent3">
<div class="tab-pane fade show active" id="pills-home3" role="tabpanel" aria-labelledby="pills-home-tab3">
Tab 1 content button version
</div>
<div class="tab-pane fade" id="pills-profile3" role="tabpanel" aria-labelledby="pills-profile-tab3">
Tab 2 content button version
</div>
<div class="tab-pane fade" id="pills-contact3" role="tabpanel" aria-labelledby="pills-contact-tab3">
Tab 3 content button version
</div>
</div>