Default Tabs
Create
default tabs
in Bootstrap by using
<ul class="nav nav-tabs">
for the tab headers and
<div class="tab-content">
for the content. Link tabs to content with matching
id
attributes.
Home
Welcome to our Admin! Here you can find information about our latest news, events, and updates. Stay tuned for blog posts and announcements. If you're new, we recommend checking out our About Us page to learn more about what we do and how we can help you. Feel free to explore and contact us if you have any questions!
Profile
Hello, John Doe! Hereâs a brief overview of your profile. Youâve been a member since 2020 and have actively participated in various forums and discussions. Your recent activities include posting in the tech forum and commenting on the latest industry trends. Update your profile picture, manage your personal information, or review your recent activity logs to stay on top of things.
Messages
You have 3 new messages in your inbox. Check them out to stay updated with the latest communications from your team and friends. Donât forget to review your message threads for any important announcements or updates. If you need to send a new message or reply to existing conversations, use the messaging tools provided here.
Settings
Customize your account settings here. Update your email address, change your password, or adjust your notification preferences. You can also configure privacy settings to control who can see your information. Make sure to review your settings periodically to ensure everything is tailored to your needs and preferences.
Justified alignment
Create
justified tabs
in Bootstrap with the
.nav-justified
class. Apply this class to the
<ul class="nav nav-tabs">
to make tabs evenly spread across the width of their container.
Home
Welcome to our Admin! Here you can find information about our latest news, events, and updates. Stay tuned for blog posts and announcements. If you're new, we recommend checking out our About Us page to learn more about what we do and how we can help you. Feel free to explore and contact us if you have any questions!
Profile
Hello, John Doe! Hereâs a brief overview of your profile. Youâve been a member since 2020 and have actively participated in various forums and discussions. Your recent activities include posting in the tech forum and commenting on the latest industry trends. Update your profile picture, manage your personal information, or review your recent activity logs to stay on top of things.
Messages
You have 3 new messages in your inbox. Check them out to stay updated with the latest communications from your team and friends. Donât forget to review your message threads for any important announcements or updates. If you need to send a new message or reply to existing conversations, use the messaging tools provided here.
Settings
Customize your account settings here. Update your email address, change your password, or adjust your notification preferences. You can also configure privacy settings to control who can see your information. Make sure to review your settings periodically to ensure everything is tailored to your needs and preferences.
Pills Tabs
Use
pills
for tabs in Bootstrap by applying the
.nav-pills
class to the
<ul class="nav">
element. This creates tabs with a pill-like appearance for a distinctive look.
Home
Welcome to our Admin! Here you can find information about our latest news, events, and updates. Stay tuned for blog posts and announcements. If you're new, we recommend checking out our About Us page to learn more about what we do and how we can help you. Feel free to explore and contact us if you have any questions!
Profile
Hello, John Doe! Hereâs a brief overview of your profile. Youâve been a member since 2020 and have actively participated in various forums and discussions. Your recent activities include posting in the tech forum and commenting on the latest industry trends. Update your profile picture, manage your personal information, or review your recent activity logs to stay on top of things.
Messages
You have 3 new messages in your inbox. Check them out to stay updated with the latest communications from your team and friends. Donât forget to review your message threads for any important announcements or updates. If you need to send a new message or reply to existing conversations, use the messaging tools provided here.
Settings
Customize your account settings here. Update your email address, change your password, or adjust your notification preferences. You can also configure privacy settings to control who can see your information. Make sure to review your settings periodically to ensure everything is tailored to your needs and preferences.
Vertical alignment
Create
vertical tabs
in Bootstrap by using the
.nav-tabs
class with
.flex-column
on the
<ul class="nav">
. This arranges tabs vertically alongside their content.
Home
Welcome to our Admin! Here you can find information about our latest news, events, and updates. Stay tuned for blog posts and announcements. If you're new, we recommend checking out our About Us page to learn more about what we do and how we can help you. Feel free to explore and contact us if you have any questions!
Profile
Hello, John Doe! Hereâs a brief overview of your profile. Youâve been a member since 2020 and have actively participated in various forums and discussions. Your recent activities include posting in the tech forum and commenting on the latest industry trends. Update your profile picture, manage your personal information, or review your recent activity logs to stay on top of things.
Messages
You have 3 new messages in your inbox. Check them out to stay updated with the latest communications from your team and friends. Donât forget to review your message threads for any important announcements or updates. If you need to send a new message or reply to existing conversations, use the messaging tools provided here.
Settings
Customize your account settings here. Update your email address, change your password, or adjust your notification preferences. You can also configure privacy settings to control who can see your information. Make sure to review your settings periodically to ensure everything is tailored to your needs and preferences.
Header Tabs
Home
Welcome to our Admin! Here you can find information about our latest news, events, and updates. Stay tuned for blog posts and announcements. If you're new, we recommend checking out our About Us page to learn more about what we do and how we can help you. Feel free to explore and contact us if you have any questions!
Profile
Hello, John Doe! Hereâs a brief overview of your profile. Youâve been a member since 2020 and have actively participated in various forums and discussions. Your recent activities include posting in the tech forum and commenting on the latest industry trends. Update your profile picture, manage your personal information, or review your recent activity logs to stay on top of things.
Messages
You have 3 new messages in your inbox. Check them out to stay updated with the latest communications from your team and friends. Donât forget to review your message threads for any important announcements or updates. If you need to send a new message or reply to existing conversations, use the messaging tools provided here.
Settings
Customize your account settings here. Update your email address, change your password, or adjust your notification preferences. You can also configure privacy settings to control who can see your information. Make sure to review your settings periodically to ensure everything is tailored to your needs and preferences.
Footer Tabs
Home
Welcome to our Admin! Here you can find information about our latest news, events, and updates. Stay tuned for blog posts and announcements. If you're new, we recommend checking out our About Us page to learn more about what we do and how we can help you. Feel free to explore and contact us if you have any questions!
Profile
Hello, John Doe! Hereâs a brief overview of your profile. Youâve been a member since 2020 and have actively participated in various forums and discussions. Your recent activities include posting in the tech forum and commenting on the latest industry trends. Update your profile picture, manage your personal information, or review your recent activity logs to stay on top of things.
Messages
You have 3 new messages in your inbox. Check them out to stay updated with the latest communications from your team and friends. Donât forget to review your message threads for any important announcements or updates. If you need to send a new message or reply to existing conversations, use the messaging tools provided here.
Settings
Customize your account settings here. Update your email address, change your password, or adjust your notification preferences. You can also configure privacy settings to control who can see your information. Make sure to review your settings periodically to ensure everything is tailored to your needs and preferences.
Custom Tabs
Home
Welcome to our Admin! Here you can find information about our latest news, events, and updates. Stay tuned for blog posts and announcements. If you're new, we recommend checking out our About Us page to learn more about what we do and how we can help you. Feel free to explore and contact us if you have any questions!
Profile
Hello, John Doe! Hereâs a brief overview of your profile. Youâve been a member since 2020 and have actively participated in various forums and discussions. Your recent activities include posting in the tech forum and commenting on the latest industry trends. Update your profile picture, manage your personal information, or review your recent activity logs to stay on top of things.
Messages
You have 3 new messages in your inbox. Check them out to stay updated with the latest communications from your team and friends. Donât forget to review your message threads for any important announcements or updates. If you need to send a new message or reply to existing conversations, use the messaging tools provided here.
Settings
Customize your account settings here. Update your email address, change your password, or adjust your notification preferences. You can also configure privacy settings to control who can see your information. Make sure to review your settings periodically to ensure everything is tailored to your needs and preferences.
Custom Tabs
Use
nav-tabs-custom
class to create custom tabs with borders.
Home
Welcome to our Admin! Here you can find information about our latest news, events, and updates. Stay tuned for blog posts and announcements. If you're new, we recommend checking out our About Us page to learn more about what we do and how we can help you. Feel free to explore and contact us if you have any questions!
Profile
Hello, John Doe! Hereâs a brief overview of your profile. Youâve been a member since 2020 and have actively participated in various forums and discussions. Your recent activities include posting in the tech forum and commenting on the latest industry trends. Update your profile picture, manage your personal information, or review your recent activity logs to stay on top of things.
Messages
You have 3 new messages in your inbox. Check them out to stay updated with the latest communications from your team and friends. Donât forget to review your message threads for any important announcements or updates. If you need to send a new message or reply to existing conversations, use the messaging tools provided here.
Settings
Customize your account settings here. Update your email address, change your password, or adjust your notification preferences. You can also configure privacy settings to control who can see your information. Make sure to review your settings periodically to ensure everything is tailored to your needs and preferences.
Arrow Nav tabs
Use
arrow navigation
for tabs with the
.arrow-navtabs
class to add arrows for easier tab switching.
Home
Welcome to our Admin! Here you can find information about our latest news, events, and updates. Stay tuned for blog posts and announcements. If you're new, we recommend checking out our About Us page to learn more about what we do and how we can help you. Feel free to explore and contact us if you have any questions!
Profile
Hello, John Doe! Hereâs a brief overview of your profile. Youâve been a member since 2020 and have actively participated in various forums and discussions. Your recent activities include posting in the tech forum and commenting on the latest industry trends. Update your profile picture, manage your personal information, or review your recent activity logs to stay on top of things.
Messages
You have 3 new messages in your inbox. Check them out to stay updated with the latest communications from your team and friends. Donât forget to review your message threads for any important announcements or updates. If you need to send a new message or reply to existing conversations, use the messaging tools provided here.
Settings
Customize your account settings here. Update your email address, change your password, or adjust your notification preferences. You can also configure privacy settings to control who can see your information. Make sure to review your settings periodically to ensure everything is tailored to your needs and preferences.
Custom Tabs Bordered
Create bordered tabs with smooth animations using the
.nav-tabs-bordered
class. This class adds borders around each tab for a distinct look.
Home
Welcome to our Admin! Here you can find information about our latest news, events, and updates. Stay tuned for blog posts and announcements. If you're new, we recommend checking out our About Us page to learn more about what we do and how we can help you. Feel free to explore and contact us if you have any questions!
Profile
Hello, John Doe! Hereâs a brief overview of your profile. Youâve been a member since 2020 and have actively participated in various forums and discussions. Your recent activities include posting in the tech forum and commenting on the latest industry trends. Update your profile picture, manage your personal information, or review your recent activity logs to stay on top of things.
Messages
You have 3 new messages in your inbox. Check them out to stay updated with the latest communications from your team and friends. Donât forget to review your message threads for any important announcements or updates. If you need to send a new message or reply to existing conversations, use the messaging tools provided here.
Settings
Customize your account settings here. Update your email address, change your password, or adjust your notification preferences. You can also configure privacy settings to control who can see your information. Make sure to review your settings periodically to ensure everything is tailored to your needs and preferences.
Icon Tabs
Add icons to Bootstrap tabs by placing an
<i>
tag inside the tab links. This enhances the look and improves navigation.
Home
Welcome to our Admin! Here you can find information about our latest news, events, and updates. Stay tuned for blog posts and announcements. If you're new, we recommend checking out our About Us page to learn more about what we do and how we can help you. Feel free to explore and contact us if you have any questions!
Profile
Hello, John Doe! Hereâs a brief overview of your profile. Youâve been a member since 2020 and have actively participated in various forums and discussions. Your recent activities include posting in the tech forum and commenting on the latest industry trends. Update your profile picture, manage your personal information, or review your recent activity logs to stay on top of things.
Messages
You have 3 new messages in your inbox. Check them out to stay updated with the latest communications from your team and friends. Donât forget to review your message threads for any important announcements or updates. If you need to send a new message or reply to existing conversations, use the messaging tools provided here.
Settings
Customize your account settings here. Update your email address, change your password, or adjust your notification preferences. You can also configure privacy settings to control who can see your information. Make sure to review your settings periodically to ensure everything is tailored to your needs and preferences.