bootstrap 5 tabs with icons and underline hover effect
hunzala
Created Nov 01, 2025
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/ionicons/ionicons.js"></script>
<div class="tabs-container">
<!-- Page Header -->
<div class="page-header">
<h1>Tabs with Icons</h1>
<p>Beautiful, interactive tabs with underline hover effects</p>
</div>
<!-- Style 1: Standard Horizontal Tabs -->
<div class="tabs-card">
<ul class="nav custom-tabs" id="mainTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab">
<ion-icon name="home"></ion-icon>
Home
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab">
<ion-icon name="person"></ion-icon>
Profile
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab">
<ion-icon name="mail"></ion-icon>
Messages
<span class="tab-badge">3</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab">
<ion-icon name="settings"></ion-icon>
Settings
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="analytics-tab" data-bs-toggle="tab" data-bs-target="#analytics" type="button" role="tab">
<ion-icon name="bar-chart"></ion-icon>
Analytics
</button>
</li>
</ul>
<div class="tab-content custom-tab-content" id="mainTabsContent">
<!-- Home Tab -->
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="tab-content-header">
<div class="tab-content-icon">
<ion-icon name="home"></ion-icon>
</div>
<h3>Welcome Home</h3>
</div>
<p class="tab-description">
Welcome to your dashboard! Here you'll find an overview of your account activity, recent updates, and quick access to important features. Get started by exploring the different sections available.
</p>
<div class="tab-features">
<div class="feature-card">
<div class="feature-icon">
<ion-icon name="speedometer"></ion-icon>
</div>
<div class="feature-title">Quick Access</div>
<p class="feature-description">Access your most used features and tools instantly from the dashboard.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<ion-icon name="notifications"></ion-icon>
</div>
<div class="feature-title">Real-time Updates</div>
<p class="feature-description">Stay informed with instant notifications about important events.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<ion-icon name="shield-checkmark"></ion-icon>
</div>
<div class="feature-title">Secure & Safe</div>
<p class="feature-description">Your data is protected with enterprise-grade security measures.</p>
</div>
</div>
</div>
<!-- Profile Tab -->
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="tab-content-header">
<div class="tab-content-icon">
<ion-icon name="person"></ion-icon>
</div>
<h3>Your Profile</h3>
</div>
<p class="tab-description">
Manage your personal information, update your profile picture, and customize your account preferences. Keep your profile up-to-date to get the most personalized experience.
</p>
<div class="tab-features">
<div class="feature-card">
<div class="feature-icon">
<ion-icon name="create"></ion-icon>
</div>
<div class="feature-title">Edit Profile</div>
<p class="feature-description">Update your personal details, bio, and contact information easily.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<ion-icon name="image"></ion-icon>
</div>
<div class="feature-title">Profile Picture</div>
<p class="feature-description">Upload and customize your profile picture to personalize your account.</p>
</div>
</div>
</div>
<!-- Messages Tab -->
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
<div class="tab-content-header">
<div class="tab-content-icon">
<ion-icon name="mail"></ion-icon>
</div>
<h3>Messages</h3>
</div>
<p class="tab-description">
View and manage all your messages in one place. Stay connected with your team, respond to inquiries, and keep track of important conversations. You have 3 unread messages.
</p>
<div class="tab-features">
<div class="feature-card">
<div class="feature-icon">
<ion-icon name="chatbubbles"></ion-icon>
</div>
<div class="feature-title">Conversations</div>
<p class="feature-description">Organize and manage all your conversations in threaded views.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<ion-icon name="search"></ion-icon>
</div>
<div class="feature-title">Search Messages</div>
<p class="feature-description">Quickly find any message with powerful search capabilities.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<ion-icon name="archive"></ion-icon>
</div>
<div class="feature-title">Archive</div>
<p class="feature-description">Keep your inbox clean by archiving old conversations.</p>
</div>
</div>
</div>
<!-- Settings Tab -->
<div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
<div class="tab-content-header">
<div class="tab-content-icon">
<ion-icon name="settings"></ion-icon>
</div>
<h3>Settings</h3>
</div>
<p class="tab-description">
Configure your account settings, manage privacy preferences, and customize your experience. Control notifications, security options, and integration settings from here.
</p>
<div class="tab-features">
<div class="feature-card">
<div class="feature-icon">
<ion-icon name="lock-closed"></ion-icon>
</div>
<div class="feature-title">Privacy & Security</div>
<p class="feature-description">Manage your privacy settings and security preferences.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<ion-icon name="notifications"></ion-icon>
</div>
<div class="feature-title">Notifications</div>
<p class="feature-description">Customize when and how you receive notifications.</p>
</div>
</div>
</div>
<!-- Analytics Tab -->
<div class="tab-pane fade" id="analytics" role="tabpanel" aria-labelledby="analytics-tab">
<div class="tab-content-header">
<div class="tab-content-icon">
<ion-icon name="bar-chart"></ion-icon>
</div>
<h3>Analytics Dashboard</h3>
</div>
<p class="tab-description">
Track your performance with detailed analytics and insights. Monitor key metrics, view trends over time, and make data-driven decisions to improve your results.
</p>
<div class="tab-features">
<div class="feature-card">
<div class="feature-icon">
<ion-icon name="trending-up"></ion-icon>
</div>
<div class="feature-title">Performance Metrics</div>
<p class="feature-description">Track key performance indicators and growth metrics.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<ion-icon name="stats-chart"></ion-icon>
</div>
<div class="feature-title">Reports</div>
<p class="feature-description">Generate detailed reports for deeper insights into your data.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<ion-icon name="calendar"></ion-icon>
</div>
<div class="feature-title">Historical Data</div>
<p class="feature-description">Access and analyze historical data to identify trends.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Style 2: Pill Tabs -->
<div class="tabs-card">
<ul class="nav pill-tabs" id="pillTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab">
<ion-icon name="apps"></ion-icon>
Overview
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="team-tab" data-bs-toggle="tab" data-bs-target="#team" type="button" role="tab">
<ion-icon name="people"></ion-icon>
Team
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="projects-tab" data-bs-toggle="tab" data-bs-target="#projects" type="button" role="tab">
<ion-icon name="briefcase"></ion-icon>
Projects
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="reports-tab" data-bs-toggle="tab" data-bs-target="#reports" type="button" role="tab">
<ion-icon name="document-text"></ion-icon>
Reports
</button>
</li>
</ul>
<div class="tab-content custom-tab-content" id="pillTabsContent">
<div class="tab-pane fade show active" id="overview" role="tabpanel">
<div class="tab-content-header">
<div class="tab-content-icon">
<ion-icon name="apps"></ion-icon>
</div>
<h3>Overview</h3>
</div>
<p class="tab-description">
Get a comprehensive view of your workspace with the overview dashboard. See all your active projects, team activities, and recent updates at a glance.
</p>
</div>
<div class="tab-pane fade" id="team" role="tabpanel">
<div class="tab-content-header">
<div class="tab-content-icon">
<ion-icon name="people"></ion-icon>
</div>
<h3>Team Management</h3>
</div>
<p class="tab-description">
Manage your team members, assign roles, and track collaboration. Invite new members and monitor team performance.
</p>
</div>
<div class="tab-pane fade" id="projects" role="tabpanel">
<div class="tab-content-header">
<div class="tab-content-icon">
<ion-icon name="briefcase"></ion-icon>
</div>
<h3>Projects</h3>
</div>
<p class="tab-description">
View and manage all your projects in one place. Create new projects, track progress, and collaborate with your team effectively.
</p>
</div>
<div class="tab-pane fade" id="reports" role="tabpanel">
<div class="tab-content-header">
<div class="tab-content-icon">
<ion-icon name="document-text"></ion-icon>
</div>
<h3>Reports & Analytics</h3>
</div>
<p class="tab-description">
Generate detailed reports and access analytics for your projects and team performance. Export data in various formats.
</p>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
* {
font-family: 'Roboto', sans-serif;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 60px 20px;
}
.tabs-container {
max-width: 1000px;
margin: 0 auto;
}
.page-header {
text-align: center;
color: white;
margin-bottom: 50px;
}
.page-header h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 15px;
}
.page-header p {
font-size: 1.1rem;
opacity: 0.9;
}
/* Tabs Card */
.tabs-card {
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
margin-bottom: 40px;
}
/* Custom Nav Tabs */
.custom-tabs {
display: flex;
border-bottom: 2px solid #e0e0e0;
background: #f8f9fa;
padding: 0;
margin: 0;
list-style: none;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.custom-tabs::-webkit-scrollbar {
height: 4px;
}
.custom-tabs::-webkit-scrollbar-thumb {
background: #667eea;
border-radius: 4px;
}
.custom-tabs .nav-item {
flex-shrink: 0;
}
.custom-tabs .nav-link {
border: none;
background: transparent;
color: #7f8c8d;
padding: 20px 30px;
font-weight: 500;
font-size: 15px;
position: relative;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
border-radius: 0;
white-space: nowrap;
}
.custom-tabs .nav-link ion-icon {
font-size: 22px;
transition: all 0.3s ease;
}
.custom-tabs .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.custom-tabs .nav-link:hover {
color: #667eea;
background: rgba(102, 126, 234, 0.05);
}
.custom-tabs .nav-link:hover::after {
transform: scaleX(1);
}
.custom-tabs .nav-link:hover ion-icon {
transform: translateY(-3px);
}
.custom-tabs .nav-link.active {
color: #667eea;
background: white;
font-weight: 600;
}
.custom-tabs .nav-link.active::after {
transform: scaleX(1);
}
.custom-tabs .nav-link.active ion-icon {
color: #667eea;
}
/* Tab Content */
.custom-tab-content {
padding: 40px;
}
.tab-pane {
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.tab-content-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.tab-content-icon {
width: 50px;
height: 50px;
border-radius: 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
}
.tab-content-header h3 {
font-size: 1.8rem;
font-weight: 700;
color: #2c3e50;
margin: 0;
}
.tab-description {
color: #7f8c8d;
line-height: 1.8;
margin-bottom: 25px;
font-size: 15px;
}
.tab-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
}
.feature-card {
background: #f8f9fa;
padding: 25px;
border-radius: 12px;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.feature-card:hover {
background: white;
border-color: #667eea;
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
}
.feature-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
margin-bottom: 15px;
}
.feature-title {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 10px;
}
.feature-description {
color: #7f8c8d;
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
}
/* Vertical Tabs Style */
.vertical-tabs-container {
display: flex;
gap: 0;
}
.vertical-tabs {
flex-direction: column;
border-bottom: none;
border-right: 2px solid #e0e0e0;
background: #f8f9fa;
min-width: 250px;
}
.vertical-tabs .nav-link {
text-align: left;
justify-content: flex-start;
}
.vertical-tabs .nav-link::after {
left: auto;
right: 0;
width: 3px;
height: 100%;
transform: scaleY(0);
}
.vertical-tabs .nav-link:hover::after,
.vertical-tabs .nav-link.active::after {
transform: scaleY(1);
}
/* Pill Style Tabs */
.pill-tabs {
border-bottom: none;
background: transparent;
padding: 20px;
gap: 10px;
flex-wrap: wrap;
}
.pill-tabs .nav-link {
border-radius: 50px;
background: white;
border: 2px solid #e0e0e0;
padding: 12px 25px;
}
.pill-tabs .nav-link::after {
display: none;
}
.pill-tabs .nav-link:hover {
background: #667eea;
color: white;
border-color: #667eea;
}
.pill-tabs .nav-link.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-color: transparent;
}
/* Badge */
.tab-badge {
background: #f093fb;
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
margin-left: 8px;
}
/* Responsive */
@media (max-width: 768px) {
.custom-tabs .nav-link {
padding: 15px 20px;
font-size: 14px;
}
.custom-tab-content {
padding: 25px 20px;
}
.tab-content-header h3 {
font-size: 1.5rem;
}
.vertical-tabs-container {
flex-direction: column;
}
.vertical-tabs {
flex-direction: row;
border-right: none;
border-bottom: 2px solid #e0e0e0;
min-width: auto;
overflow-x: auto;
}
.vertical-tabs .nav-link::after {
left: 0;
right: 0;
top: auto;
bottom: 0;
width: 100%;
height: 3px;
transform: scaleX(0);
}
.vertical-tabs .nav-link:hover::after,
.vertical-tabs .nav-link.active::after {
transform: scaleX(1);
}
.page-header h1 {
font-size: 2rem;
}
}
Comments (1)
Login to leave a comment
Login
Great 👍