Tabs
Basic, pill, underline, vertical, card and segmented tabs.
Basic Bootstrap Tabs
Product overview and key highlights.
Everything included in this plan.
Simple, transparent pricing.
<ul class="nav nav-tabs">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#t1">Overview</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#t2">Features</button>
</li>
</ul>
<div class="tab-content pt-3">
<div class="tab-pane fade show active" id="t1">Overview...</div>
<div class="tab-pane fade" id="t2">Features...</div>
</div>
<style>
.nav-tabs {
border-bottom: 1px solid #e2e8f0;
}
.nav-tabs .nav-link {
padding: 0.75rem 1.25rem;
font-size: 0.9rem;
font-weight: 600;
color: #64748b;
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.nav-tabs .nav-link:hover {
color: #1e3a8a;
border-color: transparent;
}
.nav-tabs .nav-link.active {
color: #1e3a8a;
background: none;
border-color: transparent;
border-bottom: 2px solid #1e3a8a;
}
.tab-content {
font-size: 0.875rem;
color: #475569;
}
</style>
Pill Tabs
All items
Active items
Pending items
Archived items
<ul class="nav nav-pills">
<li class="nav-item"><button class="nav-link active" data-bs-toggle="pill" data-bs-target="#p1">All</button></li>
<li class="nav-item"><button class="nav-link" data-bs-toggle="pill" data-bs-target="#p2">Active</button></li>
</ul>
<div class="tab-content pt-3">
<div class="tab-pane fade show active" id="p1">All items</div>
<div class="tab-pane fade" id="p2">Active items</div>
</div>
<style>
.nav-pills {
display: inline-flex;
background: #f1f5f9;
padding: 0.25rem;
border-radius: 999px;
gap: 0.25rem;
}
.nav-pills .nav-link {
border-radius: 999px;
padding: 0.5rem 1rem;
font-size: 0.85rem;
font-weight: 600;
color: #64748b;
background: transparent;
border: none;
}
.nav-pills .nav-link:hover {
color: #1e3a8a;
}
.nav-pills .nav-link.active {
background: #1e3a8a;
color: #fff;
}
.tab-content {
font-size: 0.875rem;
color: #475569;
}
</style>
Underline Tabs
Home content
Profile content
Messages content
<ul class="nav nav-underline">
<li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#u1">Home</button></li>
<li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#u2">Profile</button></li>
</ul>
<div class="tab-content pt-3">
<div class="tab-pane fade show active" id="u1">Home content</div>
<div class="tab-pane fade" id="u2">Profile content</div>
</div>
<style>
.nav-underline {
border-bottom: 1px solid #e2e8f0;
}
.nav-underline .nav-link {
padding: 0.75rem 1.25rem;
font-size: 0.9rem;
font-weight: 600;
color: #64748b;
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.nav-underline .nav-link:hover {
color: #1e3a8a;
}
.nav-underline .nav-link.active {
color: #1e3a8a;
border-bottom-color: #1e3a8a;
}
.tab-content {
font-size: 0.875rem;
color: #475569;
}
</style>
Vertical Tabs
General settings
Security settings
Notification settings
<div class="d-flex">
<div class="nav flex-column nav-pills me-3" style="min-width:160px;">
<button class="nav-link active text-start" data-bs-toggle="pill" data-bs-target="#v1">General</button>
<button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#v2">Security</button>
</div>
<div class="tab-content flex-grow-1">
<div class="tab-pane fade show active" id="v1">General</div>
<div class="tab-pane fade" id="v2">Security</div>
</div>
</div>
<style>
.nav.flex-column {
gap: 0.25rem;
background: transparent;
padding: 0;
}
.nav.flex-column .nav-link {
border-radius: 0.5rem;
padding: 0.6rem 1rem;
font-size: 0.875rem;
font-weight: 600;
color: #64748b;
background: transparent;
border: none;
text-align: left;
}
.nav.flex-column .nav-link:hover {
background: #f1f5f9;
color: #1e3a8a;
}
.nav.flex-column .nav-link.active {
background: #1e3a8a;
color: #fff;
}
.tab-content {
font-size: 0.875rem;
color: #475569;
}
</style>
Tabs with Badges
Inbox messages
Sent messages
Draft messages
<ul class="nav nav-tabs">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#b1">
Inbox <span class="badge bg-primary ms-1">12</span>
</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#b2">Sent</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#b3">
Drafts <span class="badge bg-secondary ms-1">3</span>
</button>
</li>
</ul>
<div class="tab-content pt-3">
<div class="tab-pane fade show active" id="b1">Inbox messages</div>
<div class="tab-pane fade" id="b2">Sent messages</div>
<div class="tab-pane fade" id="b3">Draft messages</div>
</div>
<style>
.nav-tabs {
border-bottom: 1px solid #e2e8f0;
}
.nav-tabs .nav-link {
padding: 0.75rem 1.25rem;
font-size: 0.9rem;
font-weight: 600;
color: #64748b;
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.nav-tabs .nav-link:hover {
color: #1e3a8a;
border-color: transparent;
}
.nav-tabs .nav-link.active {
color: #1e3a8a;
background: none;
border-color: transparent;
border-bottom: 2px solid #1e3a8a;
}
.nav-tabs .nav-link .badge {
font-size: 0.7rem;
font-weight: 700;
padding: 0.2rem 0.5rem;
border-radius: 999px;
vertical-align: middle;
}
.nav-tabs .nav-link .badge.bg-primary {
background: #eef2f8 !important;
color: #1e3a8a !important;
}
.nav-tabs .nav-link.active .badge.bg-primary {
background: #1e3a8a !important;
color: #fff !important;
}
.nav-tabs .nav-link .badge.bg-secondary {
background: #e2e8f0 !important;
color: #475569 !important;
}
.tab-content {
font-size: 0.875rem;
color: #475569;
}
</style>
Segmented Control
<div class="btn-group" role="group">
<input type="radio" class="btn-check" name="seg" id="seg1" checked>
<label class="btn btn-outline-primary" for="seg1">Day</label>
<input type="radio" class="btn-check" name="seg" id="seg2">
<label class="btn btn-outline-primary" for="seg2">Week</label>
<input type="radio" class="btn-check" name="seg" id="seg3">
<label class="btn btn-outline-primary" for="seg3">Month</label>
<input type="radio" class="btn-check" name="seg" id="seg4">
<label class="btn btn-outline-primary" for="seg4">Year</label>
</div>
<style>
.btn-outline-primary {
--bs-btn-color: #1e3a8a;
--bs-btn-border-color: #cbd5e1;
--bs-btn-hover-bg: #f1f5f9;
--bs-btn-hover-border-color: #1e3a8a;
--bs-btn-hover-color: #1e3a8a;
--bs-btn-active-bg: #1e3a8a;
--bs-btn-active-border-color: #1e3a8a;
--bs-btn-active-color: #fff;
}
</style>