Navs <> show code
<ul class="nav nav-tabs nav-justified icon_tabs" role="tablist">
<li class="nav-item text-center">
<a class="nav-link active" href="#tab1" role="tab" data-toggle="tab">
<i class="fa fa-cube"></i>
<h3>Massage Therapy</h3>
</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#tab2" role="tab" data-toggle="tab">...</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#tab3" role="tab" data-toggle="tab">...</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#tab4" role="tab" data-toggle="tab">...</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="tab1">
<div class="row">
<div class="col-xs-5 col-md-5 push-md-7">
<div class="service_image">
<img src="..." alt="image">
</div>
</div>
<div class="col-xs-7 col-md-7 pull-md-5">
<div class="tab-content_left styled_list">
<h3>Massage Therapy</h3>
<p>
....
</p>
<ul class="tab-content_list">
<li class="">....</li>
</ul>
<a href="#" class="btn btn-primary btn-default">Read More</a>
</div>
</div>
</div>
</div>
</div>
<!-- Border bottom style nav tabs -->
<ul class="nav nav-tabs bar_tabs" role="tablist">
<li class="nav-item text-center">
<a class="nav-link active" href="#tab1" role="tab" data-toggle="tab">
<i class="fa fa-cube"></i>
<h3>Massage Therapy</h3>
</a>
</li>
</ul>
How to use
Here’s how:
- .icon_tabs used with .nav-tabs for iconic navigation tab menu
- .bar_tabs used with .nav-tabs for Border bottom styled nav tabs shown in example 2
Example
Massage Therapy
Sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor. in reprehenderit in voluptate velit esse cillum.
- Fringilla dolor ullamcorper.
- Dolor ullamcorp faucibu.
- Tempus velit venenatis.
- Magna laoreet augue interdum.
- Laoreet augue interdum et.
- Posuere magna mollis lectus.
Hair Therapy
In reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore dolore magna aliqua.
- Fringilla dolor ullamcorper.
- Dolor ullamcorp faucibu.
- Tempus velit venenatis.
- Magna laoreet augue interdum.
- Laoreet augue interdum et.
- Posuere magna mollis lectus.
Makeup Therapy
Duis aute irure dolor. adipisicing elit sed do eiusmod tempor incididunt ut labore dolore magna aliqua.ullamco laboris nisi ut aliquip ex ea commodo consequat in reprehenderit in voluptate velit esse.
- Fringilla dolor ullamcorper.
- Dolor ullamcorp faucibu.
- Tempus velit venenatis.
- Magna laoreet augue interdum.
- Laoreet augue interdum et.
- Posuere magna mollis lectus.
Facial Therapy
Commodo consequat duis aute irure dolor., consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore dolore magna aliqua.ullamco laboris nisi ut aliquip ex ea in reprehenderit in voluptate velit.
- Fringilla dolor ullamcorper.
- Dolor ullamcorp faucibu.
- Tempus velit venenatis.
- Magna laoreet augue interdum.
- Laoreet augue interdum et.
- Posuere magna mollis lectus.
Border bottom style on active Nav
Hair
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspici atis unde omnis iste natus error sit voluptatem.
- Fringilla dolor ullamcorper.
- Dolor ullamcorp faucibu.
- Tempus velit venenatis.
- Magna laoreet augue interdum.
- Laoreet augue interdum et.
- Posuere magna mollis lectus.
Makeup
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspici atis unde omnis iste natus error sit voluptatem. Lorem ipsum dolor sit amet, consectetur in reprehenderit in .
- Fringilla dolor ullamcorper.
- Dolor ullamcorp faucibu.
- Tempus velit venenatis.
- Magna laoreet augue interdum.
- Laoreet augue interdum et.
- Posuere magna mollis lectus.
Facial
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore dolore magna aliqua.
- Fringilla dolor ullamcorper.
- Dolor ullamcorp faucibu.
- Tempus velit venenatis.
- Magna laoreet augue interdum.
- Laoreet augue interdum et.
- Posuere magna mollis lectus.
Massage
commodo consequat duis aute irure dolor., consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore dolore magna aliqua.ullamco laboris nisi ut aliquip ex ea in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Fringilla dolor ullamcorper.
- Dolor ullamcorp faucibu.
- Tempus velit venenatis.
- Magna laoreet augue interdum.
- Laoreet augue interdum et.
- Posuere magna mollis lectus.
Nav Tab styles <> show code
<!-- nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content tab-bordered">
<div class="tab-pane active" id="home" role="tabpanel">Lorem ipsum dolor sit amet..</div>
<div class="tab-pane" id="profile" role="tabpanel">Lorem ipsum dolor sit ..</div>
<div class="tab-pane" id="messages" role="tabpanel">Lorem ipsum dolor si...</div>
<div class="tab-pane" id="settings" role="tabpanel">Lorem ipsum dolor sit am...</div>
</div>
<!-- nav-pills -->
<ul class="nav nav-tabs nav-pills" role="tablist">
</ul>
<!-- Simple tabs without border -->
<ul class="nav nav-tabs nav-unbordered" role="tablist">
</ul>
How to use
- .nav-tabs for tabs navigation
- .nav-pills with .nav-tabs for filled navigation tabs
- To allow border around the content use .tab-bordered
Default tabs
Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, alias veniam. Beatae nisi illum explicabo minima, voluptatem earum alias dolores, laboriosam vitae hic et ducimus optio dicta quasi assumenda necessitatibus, quas rerum enim qui, ab. Magni id omnis tenetur, nulla, error expedita delectus saepe possimus nam fugiat praesentium voluptatem autem!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias deserunt, rerum nemo, mollitia libero odit doloribus non nam quasi quia sequi adipisci. Soluta quas beatae quia dolorum accusamus tenetur blanditiis et. Consequuntur ducimus totam facilis possimus soluta, eligendi autem asperiores, aliquid repellat tempora ea, quaerat saepe consequatur quos reprehenderit, temporibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptates, doloremque unde debitis similique, molestiae facilis minus consequuntur cupiditate eius suscipit sed voluptate dolorum tempora corrupti expedita aperiam doloribus provident et. Esse eius dolores voluptatum mollitia laudantium cumque accusantium excepturi perspiciatis, repudiandae ipsum voluptates sapiente tempora modi corrupti eveniet, architecto.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo ex iure veniam nulla mollitia quaerat totam, sit hic, perspiciatis dignissimos officiis dolorum ipsam. Deleniti, quo. Deserunt aliquid atque maiores. Vitae, praesentium hic necessitatibus soluta explicabo quas quibusdam eius, reiciendis optio, minima similique, tempora provident fuga laboriosam. Assumenda eveniet, obcaecati tempore!
Tabs with nav pills
Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, alias veniam. Beatae nisi illum explicabo minima, voluptatem earum alias dolores, laboriosam vitae hic et ducimus optio dicta quasi assumenda necessitatibus, quas rerum enim qui, ab. Magni id omnis tenetur, nulla, error expedita delectus saepe possimus nam fugiat praesentium voluptatem autem!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias deserunt, rerum nemo, mollitia libero odit doloribus non nam quasi quia sequi adipisci. Soluta quas beatae quia dolorum accusamus tenetur blanditiis et. Consequuntur ducimus totam facilis possimus soluta, eligendi autem asperiores, aliquid repellat tempora ea, quaerat saepe consequatur quos reprehenderit, temporibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptates, doloremque unde debitis similique, molestiae facilis minus consequuntur cupiditate eius suscipit sed voluptate dolorum tempora corrupti expedita aperiam doloribus provident et. Esse eius dolores voluptatum mollitia laudantium cumque accusantium excepturi perspiciatis, repudiandae ipsum voluptates sapiente tempora modi corrupti eveniet, architecto.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo ex iure veniam nulla mollitia quaerat totam, sit hic, perspiciatis dignissimos officiis dolorum ipsam. Deleniti, quo. Deserunt aliquid atque maiores. Vitae, praesentium hic necessitatibus soluta explicabo quas quibusdam eius, reiciendis optio, minima similique, tempora provident fuga laboriosam. Assumenda eveniet, obcaecati tempore!
Tabs without content border
Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, alias veniam. Beatae nisi illum explicabo minima, voluptatem earum alias dolores, laboriosam vitae hic et ducimus optio dicta quasi assumenda necessitatibus, quas rerum enim qui, ab. Magni id omnis tenetur, nulla, error expedita delectus saepe possimus nam fugiat praesentium voluptatem autem!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias deserunt, rerum nemo, mollitia libero odit doloribus non nam quasi quia sequi adipisci. Soluta quas beatae quia dolorum accusamus tenetur blanditiis et. Consequuntur ducimus totam facilis possimus soluta, eligendi autem asperiores, aliquid repellat tempora ea, quaerat saepe consequatur quos reprehenderit, temporibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptates, doloremque unde debitis similique, molestiae facilis minus consequuntur cupiditate eius suscipit sed voluptate dolorum tempora corrupti expedita aperiam doloribus provident et. Esse eius dolores voluptatum mollitia laudantium cumque accusantium excepturi perspiciatis, repudiandae ipsum voluptates sapiente tempora modi corrupti eveniet, architecto.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo ex iure veniam nulla mollitia quaerat totam, sit hic, perspiciatis dignissimos officiis dolorum ipsam. Deleniti, quo. Deserunt aliquid atque maiores. Vitae, praesentium hic necessitatibus soluta explicabo quas quibusdam eius, reiciendis optio, minima similique, tempora provident fuga laboriosam. Assumenda eveniet, obcaecati tempore!
Justified nav <> show code
<ul class="nav nav-tabs nav-pills nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#jutified1" role="tab">jutified1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#justified2" role="tab">justified2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#justified3" role="tab">justified3</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#justified4" role="tab">justified4</a>
</li>
</ul>
How to use
- . nav-justified class make justified tab menus
Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, alias veniam. Beatae nisi illum explicabo minima, voluptatem earum alias dolores, laboriosam vitae hic et ducimus optio dicta quasi assumenda necessitatibus, quas rerum enim qui, ab. Magni id omnis tenetur, nulla, error expedita delectus saepe possimus nam fugiat praesentium voluptatem autem!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias deserunt, rerum nemo, mollitia libero odit doloribus non nam quasi quia sequi adipisci. Soluta quas beatae quia dolorum accusamus tenetur blanditiis et. Consequuntur ducimus totam facilis possimus soluta, eligendi autem asperiores, aliquid repellat tempora ea, quaerat saepe consequatur quos reprehenderit, temporibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptates, doloremque unde debitis similique, molestiae facilis minus consequuntur cupiditate eius suscipit sed voluptate dolorum tempora corrupti expedita aperiam doloribus provident et. Esse eius dolores voluptatum mollitia laudantium cumque accusantium excepturi perspiciatis, repudiandae ipsum voluptates sapiente tempora modi corrupti eveniet, architecto.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo ex iure veniam nulla mollitia quaerat totam, sit hic, perspiciatis dignissimos officiis dolorum ipsam. Deleniti, quo. Deserunt aliquid atque maiores. Vitae, praesentium hic necessitatibus soluta explicabo quas quibusdam eius, reiciendis optio, minima similique, tempora provident fuga laboriosam. Assumenda eveniet, obcaecati tempore!
Vertical Tabs <> show code
<div class="row ">
<div class="col-sm-4">
<ul class="nav nav-tabs nav-stacked">
<li class="nav-item"><a href="#vtab1" class="nav-link active" data-toggle="tab" aria-expanded="true"> Home</a></li>
<li class="nav-item"><a href="#vtab2" class="nav-link" data-toggle="tab" aria-expanded="false"> Profile</a></li>
<li class="nav-item"><a href="#vtab3" class="nav-link" data-toggle="tab"> Contact</a></li>
</ul>
</div>
<div class="tab-content col-sm-8">
<div class="tab-pane fade active show" id="vtab1" aria-expanded="true">
<h4>Massage Therapy</h4>
<p>Lorem ipsum dolor sit amet... </p>
</div>
<div class="tab-pane fade" id="vtab2" aria-expanded="false">
<h4>Massage Therapy</h4>
<p>Lodistinctio voluptatibus, consequuntur vero neque.</p>
</div>
<div class="tab-pane fade" id="vtab3">
<h4>Massage Therapy</h4>
<p>Loremquo esse nesciunt.</p>
</div>
</div>
</div>
How to use
- Use .nav-stacked with .nav-tabs wrapper to make child elements get the style for vertical tabs
Example
Hair Therapy
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod illo sint molestias illum magnam vero, quisquam dolorem consequuntur modi quam sed ex repellendus a veniam ipsa quia dolorum voluptatem facere.
Makeup Therapy
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores iusto eum doloribus nam obcaecati dolorem minus rem dolores velit, corporis similique, dolor sunt fugit ipsam distinctio voluptatibus, consequuntur vero neque.
Facial Therapy
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus laudantium reprehenderit facere, pariatur, eligendi libero nostrum quia deserunt nihil facilis, quo esse nesciunt.