Messages
Liam Carter uploaded a new document to Project Phoenix
5 minutes ago
Ava Mitchell commented on Marketing Campaign Q3
12 minutes ago
30 minutes ago
Sophia Taylor sent an invoice for Service Renewal
1 hour ago
Ethan Moore completed the task UI Review
2 hours ago
Olivia White assigned you a task in Sales Pipeline
Yesterday
Tabs
Examples
Documentation and examples on how to use Bootstrap’s tab components.
Tabs on Bootstrap
<ul class="nav nav-tabs mb-3">
<li class="nav-item">
<a href="#overview" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
Overview
</a>
</li>
<li class="nav-item">
<a href="#activity" data-bs-toggle="tab" aria-expanded="true" class="nav-link active">
Activity
</a>
</li>
<li class="nav-item">
<a href="#settings" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
Settings
</a>
</li>
<li class="nav-item">
<a href="#" data-bs-toggle="tab" aria-expanded="false" class="nav-link disabled">
Disabled
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="overview">
<p class="mb-0">
...
</p>
</div>
<div class="tab-pane show active" id="activity">
<p class="mb-0">
...
</p>
</div>
<div class="tab-pane" id="settings">
<p class="mb-0">
...
</p>
</div>
</div>
Simple widget of tabbable panes of local content.
This dashboard provides a quick overview of your recent activity, performance metrics, and system status. You can easily monitor key indicators, recent logins, pending tasks, and overall user engagement.
View your latest interactions and actions taken across the platform. This includes recent file uploads, comments, status updates, and notification history to keep you up to date with ongoing changes.
Customize your account preferences including theme options, notification settings, and privacy controls. Adjust layout configurations to suit your workflow and manage integration with third-party services.
<ul class="nav nav-justified nav-tabs mb-3">
<li class="nav-item">
<a href="#overview1" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
Overview
</a>
</li>
<li class="nav-item">
<a href="#profile1" data-bs-toggle="tab" aria-expanded="true" class="nav-link active">
Profile
</a>
</li>
<li class="nav-item">
<a href="#settings1" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
Settings
</a>
</li>
<li class="nav-item">
<a href="#projects1" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
Projects
</a>
</li>
<li class="nav-item">
<a href="#support1" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
Support
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="overview1">
<p class="mb-0">
...
</p>
</div>
<div class="tab-pane show active" id="profile1">
<p class="mb-0">
...
</p>
</div>
<div class="tab-pane" id="settings1">
<p class="mb-0">
...
</p>
</div>
<div class="tab-pane" id="projects1">
<p class="mb-0">
...
</p>
</div>
<div class="tab-pane" id="support1">
<p class="mb-0">
...
</p>
</div>
</div>
Using class .nav-justified, you can force your tab menu items to use the full available width.
Get a high-level summary of recent activity, key performance indicators, and important announcements. Stay informed and make quick decisions based on real-time insights.
Customize your profile, update personal information, and manage security settings like passwords and 2FA. Keep your account secure and up to date with your latest details.
Configure system preferences, theme options, and notification settings. Easily adapt the platform to fit your workflow and preferences.
View and manage all ongoing projects, tasks, and milestones. Collaborate with your team and track progress in real-time.
Need help? Reach out to our support team or browse the help center for common questions, guides, and documentation.
<div class="row">
<div class="col-sm-3 mb-2 mb-sm-0">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link fw-semibold active show" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">
Overview
</a>
<a class="nav-link fw-semibold" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">
Profile
</a>
<a class="nav-link fw-semibold" id="v-pills-settings-tab" data-bs-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">
Settings
</a>
<a class="nav-link fw-semibold" id="v-pills-projects-tab" data-bs-toggle="pill" href="#v-pills-projects" role="tab" aria-controls="v-pills-projects" aria-selected="false">
Projects
</a>
<a class="nav-link fw-semibold" id="v-pills-support-tab" data-bs-toggle="pill" href="#v-pills-support" role="tab" aria-controls="v-pills-support" aria-selected="false">
Support
</a>
</div>
</div>
<div class="col-sm-9">
<div class="tab-content" id="v-pills-tabContent">
<!-- Overview Tab -->
<div class="tab-pane fade active show" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<p class="mb-2">...</p>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<p class="mb-0">...</p>
</div>
<!-- Profile Tab -->
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<p class="mb-2">...</p>
<ul>
<li>Name, Email, Phone</li>
<li>Change Password</li>
<li>Activity logs and preferences</li>
</ul>
<p class="mb-0">...</p>
</div>
<!-- Settings Tab -->
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<p class="mb-2">...</p>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<p class="mb-0">...</p>
</div>
<!-- Projects Tab -->
<div class="tab-pane fade" id="v-pills-projects" role="tabpanel" aria-labelledby="v-pills-projects-tab">
<p class="mb-2">...</p>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<p class="mb-0">...</p>
</div>
<!-- Support Tab -->
<div class="tab-pane fade" id="v-pills-support" role="tabpanel" aria-labelledby="v-pills-support-tab">
<p class="mb-2">...</p>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<p class="mb-0">...</p>
</div>
</div>
</div>
</div>
You can stack your navigation by changing the flex item direction with the .flex-column utility.
Welcome to your dashboard. Get an at-a-glance view of your recent activity, top stats, and personalized suggestions to enhance productivity and stay on track.
- View total project status
- Quick links to recent files
- Weekly performance charts
Your dashboard is tailored to your activity and roles. Stay informed and always one step ahead.
Manage your personal details, change your profile photo, and update your contact information.
- Name, Email, Phone
- Change Password
- Activity logs and preferences
Keeping your profile up to date ensures a better and more secure experience.
Customize your preferences, notification options, and privacy settings.
- Theme selection: Light / Dark mode
- Email & push notification toggles
- Linked accounts and integrations
Settings help personalize your interface and improve your workflow efficiency.
Track all your active, completed, and upcoming projects in one place.
- Kanban board and Gantt charts
- Task assignments and deadlines
- Progress indicators and timelines
Use collaboration tools, upload documents, and manage deliverables directly from here.
Need assistance? Access our help center or contact our support team directly.
- Browse FAQs and tutorials
- Submit a support ticket
- Live chat with support agents
We’re here 24/7 to assist you with anything you need—technical or account-related.
<div class="row">
<div class="col-sm-9">
<div class="tab-content" id="v-pills-tabContent">
<!-- Overview Tab -->
<div class="tab-pane fade active show" id="v-pills-home-right" role="tabpanel" aria-labelledby="v-pills-home-tab">
<p class="mb-2">...</p>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<p class="mb-0">...</p>
</div>
<!-- Profile Tab -->
<div class="tab-pane fade" id="v-pills-profile-right" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<p class="mb-2">...</p>
<ul>
<li>...</li>
<li>Change Password</li>
<li>Activity logs and preferences</li>
</ul>
<p class="mb-0">...</p>
</div>
<!-- Settings Tab -->
<div class="tab-pane fade" id="v-pills-settings-right" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<p class="mb-2">...</p>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<p class="mb-0">...</p>
</div>
<!-- Projects Tab -->
<div class="tab-pane fade" id="v-pills-projects-right" role="tabpanel" aria-labelledby="v-pills-projects-tab">
<p class="mb-2">...</p>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<p class="mb-0">...</p>
</div>
<!-- Support Tab -->
<div class="tab-pane fade" id="v-pills-support-right" role="tabpanel" aria-labelledby="v-pills-support-tab">
<p class="mb-2">...</p>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<p class="mb-0">...</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2 mt-sm-0">
<div class="nav flex-column nav-pills nav-pills-secondary" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link fw-semibold active show" id="v-pills-home-tab-right" data-bs-toggle="pill" href="#v-pills-home-right" role="tab" aria-controls="v-pills-home" aria-selected="true">
Overview
</a>
<a class="nav-link fw-semibold" id="v-pills-profile-tab-right" data-bs-toggle="pill" href="#v-pills-profile-right" role="tab" aria-controls="v-pills-profile" aria-selected="false">
Profile
</a>
<a class="nav-link fw-semibold" id="v-pills-settings-tab-right" data-bs-toggle="pill" href="#v-pills-settings-right" role="tab" aria-controls="v-pills-settings" aria-selected="false">
Settings
</a>
<a class="nav-link fw-semibold" id="v-pills-projects-tab-right" data-bs-toggle="pill" href="#v-pills-projects-right" role="tab" aria-controls="v-pills-projects" aria-selected="false">
Projects
</a>
<a class="nav-link fw-semibold" id="v-pills-support-tab-right" data-bs-toggle="pill" href="#v-pills-support-right" role="tab" aria-controls="v-pills-support" aria-selected="false">
Support
</a>
</div>
</div>
</div>
You can add the .nav-pills-* class to the .nav element to apply colored pill styles.
Welcome to your dashboard. Get an at-a-glance view of your recent activity, top stats, and personalized suggestions to enhance productivity and stay on track.
- View total project status
- Quick links to recent files
- Weekly performance charts
Your dashboard is tailored to your activity and roles. Stay informed and always one step ahead.
Manage your personal details, change your profile photo, and update your contact information.
- Name, Email, Phone
- Change Password
- Activity logs and preferences
Keeping your profile up to date ensures a better and more secure experience.
Customize your preferences, notification options, and privacy settings.
- Theme selection: Light / Dark mode
- Email & push notification toggles
- Linked accounts and integrations
Settings help personalize your interface and improve your workflow efficiency.
Track all your active, completed, and upcoming projects in one place.
- Kanban board and Gantt charts
- Task assignments and deadlines
- Progress indicators and timelines
Use collaboration tools, upload documents, and manage deliverables directly from here.
Need assistance? Access our help center or contact our support team directly.
- Browse FAQs and tutorials
- Submit a support ticket
- Live chat with support agents
We’re here 24/7 to assist you with anything you need—technical or account-related.
<ul class="nav nav-tabs nav-bordered mb-3">
<li class="nav-item">
<a href="#home-b1" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
Home
</a>
</li>
<li class="nav-item">
<a href="#profile-b1" data-bs-toggle="tab" aria-expanded="true" class="nav-link active">
Profile
</a>
</li>
<li class="nav-item">
<a href="#settings-b1" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
Settings
</a>
</li>
<li class="nav-item">
<a href="#about-b1" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
About
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="home-b1">
<p class="mb-0">...</p>
</div>
<div class="tab-pane show active" id="profile-b1">
<p class="mb-0">...</p>
</div>
<div class="tab-pane" id="settings-b1">
<p class="mb-0">...</p>
</div>
<div class="tab-pane" id="about-b1">
<p class="mb-0">...</p>
</div>
</div>
The navigation item can have a simple bottom border as well. Just specify the class .nav-bordered.
Welcome to our online platform! Here, we strive to offer the best products and services tailored to your lifestyle. Whether you're redecorating your home or looking for expert advice on the latest trends, we've got you covered.
Hi! I am an avid explorer, constantly seeking new adventures and insights. My passions include technology, literature, travel, fitness, and self-development. I enjoy learning new skills and sharing knowledge with others to foster personal growth.
Nestled in the heart of the city, a charming cafe offers a peaceful retreat from the urban hustle. Its inviting ambiance, with its cozy decor and warm lighting, provides the perfect setting for relaxation or a productive meeting.
Our company is dedicated to offering high-quality services and products designed to enrich your life. With a focus on sustainability and innovation, we aim to create lasting value for our customers. Join us on our journey to make everyday living better!
<ul class="nav nav-tabs nav-justified nav-bordered nav-bordered-danger mb-3">
<li class="nav-item">
<a href="#home-b2" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
<i class="ti ti-home fs-lg me-md-1 align-middle"></i>
<span class="d-none d-md-inline-block align-middle">Home</span>
</a>
</li>
<li class="nav-item">
<a href="#profile-b2" data-bs-toggle="tab" aria-expanded="true" class="nav-link active">
<i class="ti ti-user-circle fs-lg me-md-1 align-middle"></i>
<span class="d-none d-md-inline-block align-middle">Profile</span>
</a>
</li>
<li class="nav-item">
<a href="#settings-b2" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
<i class="ti ti-settings fs-lg me-md-1 align-middle"></i>
<span class="d-none d-md-inline-block align-middle">Settings</span>
</a>
</li>
<li class="nav-item">
<a href="#about-b2" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
<i class="ti ti-info-circle fs-lg me-md-1 align-middle"></i>
<span class="d-none d-md-inline-block align-middle">About</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="home-b2">
<p class="mb-0">...</p>
</div>
<div class="tab-pane show active" id="profile-b2">
<p class="mb-0">...</p>
</div>
<div class="tab-pane" id="settings-b2">
<p class="mb-0">...</p>
</div>
<div class="tab-pane" id="about-b2">
<p class="mb-0">...</p>
</div>
</div>
You can add the .nav-bordered-* class to the .nav element to apply colored border styles.
Welcome to our online platform! Our goal is to offer a wide variety of products and services that meet the needs of modern living. From cutting-edge technology to home decor solutions, we ensure that every product enhances your lifestyle and makes your life easier.
Hi there! I'm an avid explorer with a passion for technology, fitness, and continuous learning. I enjoy meeting like-minded individuals and believe in expanding my knowledge on diverse subjects, from the latest gadgets to personal development.
In the center of the city stands a quiet, charming bookstore that offers a peaceful retreat. Surrounded by vibrant streets, it provides a calm, inviting atmosphere for readers to lose themselves in books while enjoying a cup of coffee in the cozy corner.
We are a forward-thinking company focused on creating innovative solutions that empower our customers. Our team is driven by creativity and a passion for delivering exceptional experiences through high-quality products and services that cater to a variety of needs.
<ul class="nav nav-tabs nav-bordered nav-bordered-success mb-3">
<li class="nav-item">
<a href="#home-i1" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
<i class="ti ti-home fs-22 align-middle"></i>
</a>
</li>
<li class="nav-item">
<a href="#profile-i1" data-bs-toggle="tab" aria-expanded="true" class="nav-link active">
<i class="ti ti-user fs-22 align-middle"></i>
</a>
</li>
<li class="nav-item">
<a href="#settings-i1" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
<i class="ti ti-settings fs-22 align-middle"></i>
</a>
</li>
<li class="nav-item">
<a href="#about-i1" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
<i class="ti ti-info-circle fs-22 align-middle"></i>
</a>
</li>
<li class="nav-item">
<a href="#projects-i1" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
<i class="ti ti-briefcase fs-22 align-middle"></i>
</a>
</li>
<li class="nav-item">
<a href="#contact-i1" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
<i class="ti ti-mail fs-22 align-middle"></i>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="home-i1">
<p class="mb-0">...</p>
</div>
<div class="tab-pane show active" id="profile-i1">
<p class="mb-0">...</p>
</div>
<div class="tab-pane" id="settings-i1">
<p class="mb-0">...</p>
</div>
<div class="tab-pane" id="about-i1">
<p class="mb-0">...</p>
</div>
<div class="tab-pane" id="projects-i1">
<p class="mb-0">...</p>
</div>
<div class="tab-pane" id="contact-i1">
<p class="mb-0">...</p>
</div>
</div>
The navigation item can have a simple bottom border as well. Just specify the class .nav-bordered.
Discover our platform designed to make your daily life easier. From modern interiors to smart home gadgets, our curated selection is tailored for comfort, functionality, and style.
Hello! I’m a creative thinker who thrives on innovation and meaningful connections. I enjoy exploring tech trends, reading insightful books, and traveling to experience new cultures and cuisines.
A peaceful workspace can make all the difference. That’s why we offer customizable setups, soundproofing tips, and productivity tools to help you stay focused and inspired every day.
We’re a team of innovators passionate about creating seamless experiences. Our mission is to deliver solutions that merge design, functionality, and purpose in every project we undertake.
Our recent projects range from mobile app development to full-scale branding initiatives. We believe in data-driven strategies paired with creative storytelling to drive results.
Have questions or ideas? We'd love to hear from you! Reach out through our contact form, social media, or drop by our office for a chat over coffee.
Card with Tabs
Welcome to your financial dashboard. Here, you can monitor real-time updates on your income, expenses, savings, and investments. Our tools are designed to help you make informed decisions and achieve your financial goals faster.
View and manage all your bank accounts, credit cards, and loan details in one place. Link your financial institutions securely and keep track of balances, transactions, and payment schedules with ease.
Customize your preferences including budgeting alerts, currency format, report frequency, and security settings. Enable multi-factor authentication and choose how you'd like to receive account activity notifications.