Navs & Tabs
Start
Center
End
Vertical
<!-- Navigation -->
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0)">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
</li>
</ul>
<!-- /navigation -->
<!-- Navigation -->
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0)">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
</li>
</ul>
<!-- /navigation -->
<!-- Navigation -->
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0)">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
</li>
</ul>
<!-- /navigation -->
<!-- Navigation -->
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0)">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
</li>
</ul>
<!-- /navigation -->
Basic
Source Code
<!-- Tab Container -->
<div class="tabs-container">
<!-- Tab Navigation -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="true">Profile</a>
</li>
</ul>
<!-- /tab navigation -->
<!-- Tab Content -->
<div class="tab-content">
<!-- Tab Pane -->
<div id="home" class="tab-pane active">
<div class="card-body">
<p class="card-text">
<strong>A wonderful serenity has taken possession</strong> of my
entire soul,
like these sweet mornings of spring which I enjoy with my whole
heart. I am alone, and feel the charm of existence in this spot,
which was created for the bliss of souls like mine.
</p>
<p class="card-text">
I am so happy, my dear friend, so absorbed in the exquisite
sense of mere tranquil existence, that I neglect my talents. I
should be incapable of drawing a single stroke at the present
moment; and yet I feel that I never was a greater artist than
now.
</p>
</div>
</div>
<!-- /tab pane-->
<!-- Tab Pane -->
<div id="profile" class="tab-pane">
<div class="card-body">
<p class="card-text">
<strong>Thousand unknown plants are noticed by me:</strong> when I
hear the buzz
of the little world among the stalks, and grow familiar with the
countless indescribable forms of the insects and flies, then I
feel the presence of the Almighty, who formed us in his.
</p>
<p class="card-text">I am alone, and feel the charm of existence in this
spot, which
was created for the bliss of souls like mine. I am so happy, my
dear friend, so absorbed in the exquisite sense of mere tranquil
existence, that I neglect my talents. I should be incapable of
drawing.
</p>
</div>
</div>
<!-- /tab pane-->
</div>
<!-- /tab content -->
</div>
<!-- /tab container -->
Icon
Source Code
<!-- Tab Container -->
<div class="tabs-container">
<!-- Tab Navigation -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab-pane-1" role="tab" aria-controls="tab-pane-1" aria-selected="true"><i class="icon icon-desktop icon-xl"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-pane-2" role="tab" aria-controls="tab-pane-2" aria-selected="true"><i class="icon icon-dashboard icon-xl"></i>
</a>
</li>
</ul>
<!-- /tab navigation -->
<!-- Tab Content -->
<div class="tab-content">
<!-- Tab Pane -->
<div id="tab-pane-1" class="tab-pane active">
<div class="card-body">
<p class="card-text">
<strong>A wonderful serenity has taken possession</strong> of my
entire soul,
like these sweet mornings of spring which I enjoy with my whole
heart. I am alone, and feel the charm of existence in this spot,
which was created for the bliss of souls like mine.
</p>
<p class="card-text">I am so happy, my dear friend, so absorbed in the
exquisite
sense of mere tranquil existence, that I neglect my talents. I
should be incapable of drawing a single stroke at the present
moment; and yet I feel that I never was a greater artist than
now.
</p>
</div>
</div>
<!-- /tab pane-->
<!-- Tab Pane -->
<div id="tab-pane-2" class="tab-pane">
<div class="card-body">
<p class="card-text">
<strong>Thousand unknown plants are noticed by me:</strong> when I
hear the buzz
of the little world among the stalks, and grow familiar with the
countless indescribable forms of the insects and flies, then I
feel the presence of the Almighty, who formed us in his.
</p>
<p class="card-text">I am alone, and feel the charm of existence in this
spot, which
was created for the bliss of souls like mine. I am so happy, my
dear friend, so absorbed in the exquisite sense of mere tranquil
existence, that I neglect my talents. I should be incapable of
drawing.
</p>
</div>
</div>
<!-- /tab pane-->
</div>
<!-- /tab content -->
</div>
<!-- /tab container -->
Basic
Source Code
<!-- Tab Container -->
<div class="tabs-container tabs-vertical">
<!-- Tab Navigation -->
<ul class="nav nav-tabs flex-column" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab-pane-3" role="tab" aria-controls="tab-pane-3" aria-selected="true">Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-pane-4" role="tab" aria-controls="tab-pane-4" aria-selected="true">Profile
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-pane-5" role="tab" aria-controls="tab-pane-5" aria-selected="true">Messages
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-pane-6" role="tab" aria-controls="tab-pane-6" aria-selected="true">Settings
</a>
</li>
</ul>
<!-- /tab navigation -->
<!-- Tab Content -->
<div class="tab-content">
<!-- Tab Pane -->
<div id="tab-pane-3" class="tab-pane active">
<div class="card-body">
<p class="card-text">
<strong>A wonderful serenity has taken possession</strong> of my
entire soul,
like these sweet mornings of spring which I enjoy with my whole
heart. I am alone, and feel the charm of existence in this spot,
which was created for the bliss of souls like mine.
</p>
<p class="card-text">
I am so happy, my dear friend, so absorbed in the exquisite
sense of mere tranquil existence, that I neglect my talents. I
should be incapable of drawing a single stroke at the present
moment; and yet I feel that I never was a greater artist than
now.
</p>
</div>
</div>
<!-- /tab pane-->
<!-- Tab Pane -->
<div id="tab-pane-4" class="tab-pane">
<div class="card-body">
<p class="card-text">
<strong>Thousand unknown plants are noticed by me:</strong> when I
hear the buzz
of the little world among the stalks, and grow familiar with the
countless indescribable forms of the insects and flies, then I
feel the presence of the Almighty, who formed us in his.
</p>
<p class="card-text">I am alone, and feel the charm of existence in this
spot, which
was created for the bliss of souls like mine. I am so happy, my
dear friend, so absorbed in the exquisite sense of mere tranquil
existence, that I neglect my talents. I should be incapable of
drawing.
</p>
</div>
</div>
<!-- /tab pane-->
<!-- Tab Pane -->
<div id="tab-pane-5" class="tab-pane">
<div class="card-body">
<p class="card-text">
<strong>A wonderful serenity has taken possession</strong> of my
entire soul,
like these sweet mornings of spring which I enjoy with my whole
heart. I am alone, and feel the charm of existence in this spot,
which was created for the bliss of souls like mine.
</p>
<p class="card-text">
I am so happy, my dear friend, so absorbed in the exquisite
sense of mere tranquil existence, that I neglect my talents. I
should be incapable of drawing a single stroke at the present
moment; and yet I feel that I never was a greater artist than
now.
</p>
</div>
</div>
<!-- /tab pane-->
<!-- Tab Pane -->
<div id="tab-pane-6" class="tab-pane">
<div class="card-body">
<p class="card-text">
<strong>Thousand unknown plants are noticed by me:</strong> when I
hear the buzz
of the little world among the stalks, and grow familiar with the
countless indescribable forms of the insects and flies, then I
feel the presence of the Almighty, who formed us in his.
</p>
<p class="card-text">I am alone, and feel the charm of existence in this
spot, which
was created for the bliss of souls like mine. I am so happy, my
dear friend, so absorbed in the exquisite sense of mere tranquil
existence, that I neglect my talents. I should be incapable of
drawing.
</p>
</div>
</div>
<!-- /tab pane-->
</div>
<!-- /tab content -->
</div>
<!-- /tab container -->
Icon
Source Code
<!-- Tab Container -->
<div class="tabs-container tabs-vertical tabs-right">
<!-- Tab Navigation -->
<ul class="nav nav-tabs flex-column" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab-pane-7" role="tab" aria-controls="tab-pane-7" aria-selected="true"><i class="icon icon-desktop icon-xl"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-pane-8" role="tab" aria-controls="tab-pane-8" aria-selected="true"><i class="icon icon-dashboard icon-xl"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-pane-9" role="tab" aria-controls="tab-pane-9" aria-selected="true"><i class="icon icon-mail icon-xl"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-pane-10" role="tab" aria-controls="tab-pane-10" aria-selected="true"><i class="icon icon-settings icon-xl"></i>
</a>
</li>
</ul>
<!-- /tab navigation -->
<!-- Tab Content -->
<div class="tab-content">
<!-- Tab Pane -->
<div id="tab-pane-7" class="tab-pane active">
<div class="card-body">
<p class="card-text">
<strong>A wonderful serenity has taken possession</strong> of my
entire soul,
like these sweet mornings of spring which I enjoy with my whole
heart. I am alone, and feel the charm of existence in this spot,
which was created for the bliss of souls like mine.
</p>
<p class="card-text">I am so happy, my dear friend, so absorbed in the
exquisite
sense of mere tranquil existence, that I neglect my talents. I
should be incapable of drawing a single stroke at the present
moment; and yet I feel that I never was a greater artist than
now.
</p>
</div>
</div>
<!-- /tab pane-->
<!-- Tab Pane -->
<div id="tab-pane-8" class="tab-pane">
<div class="card-body">
<p class="card-text">
<strong>Thousand unknown plants are noticed by me:</strong> when I
hear the buzz
of the little world among the stalks, and grow familiar with the
countless indescribable forms of the insects and flies, then I
feel the presence of the Almighty, who formed us in his.
</p>
<p class="card-text">I am alone, and feel the charm of existence in this
spot, which
was created for the bliss of souls like mine. I am so happy, my
dear friend, so absorbed in the exquisite sense of mere tranquil
existence, that I neglect my talents. I should be incapable of
drawing.
</p>
</div>
</div>
<!-- /tab pane-->
<!-- Tab Pane -->
<div id="tab-pane-9" class="tab-pane">
<div class="card-body">
<p class="card-text">
<strong>A wonderful serenity has taken possession</strong> of my
entire soul,
like these sweet mornings of spring which I enjoy with my whole
heart. I am alone, and feel the charm of existence in this spot,
which was created for the bliss of souls like mine.
</p>
<p class="card-text">
I am so happy, my dear friend, so absorbed in the exquisite
sense of mere tranquil existence, that I neglect my talents. I
should be incapable of drawing a single stroke at the present
moment; and yet I feel that I never was a greater artist than
now.
</p>
</div>
</div>
<!-- /tab pane-->
<!-- Tab Pane -->
<div id="tab-pane-10" class="tab-pane">
<div class="card-body">
<p class="card-text">
<strong>Thousand unknown plants are noticed by me:</strong> when I
hear the buzz
of the little world among the stalks, and grow familiar with the
countless indescribable forms of the insects and flies, then I
feel the presence of the Almighty, who formed us in his.
</p>
<p class="card-text">I am alone, and feel the charm of existence in this
spot, which
was created for the bliss of souls like mine. I am so happy, my
dear friend, so absorbed in the exquisite sense of mere tranquil
existence, that I neglect my talents. I should be incapable of
drawing.
</p>
</div>
</div>
<!-- /tab pane-->
</div>
<!-- /tab content -->
</div>
<!-- /tab container -->
Pills Tabs
Source Code
<!-- Tab Container -->
<div class="tabs-container">
<!-- Card -->
<div class="card">
<!-- Card Header -->
<div class="card-header">
<!-- Tab Navigation -->
<ul class="card-header-pills nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active show" data-toggle="tab" href="#tab-pane-11" role="tab" aria-controls="tab-pane-11" aria-selected="true">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-pane-12" role="tab" aria-controls="tab-pane-12" aria-selected="false">link</a>
</li>
<li class="nav-item"><a class="nav-link disabled">Disabled</a>
</li>
</ul>
<!-- /tab navigation -->
</div>
<!-- /card header -->
<!-- Tab Content -->
<div class="tab-content">
<!-- Tab Pane -->
<div id="tab-pane-11" class="tab-pane active show">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
<h6 class="card-subtitle">Sub-heading text</h6>
<p class="card-text">
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard
dummy
text ever since the 1500s, when an unknown printer took a galley
of
type
and scrambled it to make a type specimen book.
</p>
<p class="card-text">
It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially
unchanged.
It
was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of
Lorem
Ipsum.
</p>
</div>
</div>
<!-- /tab pane-->
<!-- Tab Pane -->
<div id="tab-pane-12" class="tab-pane">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
<h6 class="card-subtitle">Sub-heading text</h6>
<p class="card-text">
<strong>Thousand unknown plants are noticed by me:</strong> when
I
hear
the buzz
of the little world among the stalks, and grow familiar with the
countless indescribable forms of the insects and flies, then I
feel the presence of the Almighty, who formed us in his.
</p>
<p class="card-text">I am alone, and feel the charm of existence in
this
spot, which
was created for the bliss of souls like mine. I am so happy, my
dear friend, so absorbed in the exquisite sense of mere tranquil
existence, that I neglect my talents. I should be incapable of
drawing.
</p>
</div>
</div>
<!-- /tab pane-->
<!-- Tab Pane -->
<div class="tab-pane">
<div class="card-body">
<h3 class="card-title">Card Title Disabled</h3>
<h6 class="card-subtitle">Sub-heading text Disabled</h6>
<p class="card-text">
Small plates, salads & sandwiches in an intimate
setting with 12 indoor seats plus patio seating</p>
<p class="card-text">
Donec imperdiet enim et dignissim interdum.
Pellentesque in ortti tor elit. Curabitur consectetur.
</p>
</div>
</div>
<!-- /tab pane-->
</div>
<!-- /tab content -->
</div>
<!-- /card -->
</div>
<!-- /tab container -->
Last modified 3yr ago