Tabs
Default Tabs
<> 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">
<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>
<!-- Justified Tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
</ul>
Example: Default Tabs
Example: Tabs with nav pills
Example: Justified Tabs
Custom Tabs
<> show code
<ul class="nav nav-tabs bar-tabs justify-content-center" role="tablist">
<li class="nav-item text-center">
<a class="nav-link active" href="#tabOne" role="tab" data-toggle="tab">
<h5>Title 1</h5>
</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#tabTwo" role="tab" data-toggle="tab">
<h5>Title 2</h5>
</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#tabThree" role="tab" data-toggle="tab">
<h5>Title 3</h5>
</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#tabFour" role="tab" data-toggle="tab">
<h5>Title 4</h5>
</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">
<div class="service_image">
<img src="..." alt="image">
</div>
</div>
<div class="col-md-7">
<div class="tab-content_left styled_list">
<h3>Modal Title</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>
Example: Custom Tabs - 1
Tab Content Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore dolore magna aliqua.ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor. 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.
Tab Content Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore dolore magna aliqua.ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor. 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.
Tab Content Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore dolore magna aliqua.ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor. 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.
Tab Content Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore dolore magna aliqua.ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor. 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.
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"><i class="fa fa-home"></i> Home</a></li>
<li class="nav-item"><a href="#vtab2" class="nav-link" data-toggle="tab" aria-expanded="false"><i class="fa fa-user"></i> Profile</a></li>
<li class="nav-item"><a href="#vtab3" class="nav-link" data-toggle="tab"><i class="fa fa-phone"></i> Contact</a></li>
</ul>
</div>
<div class="tab-content border-0 col-sm-8 ">
<div class="tab-pane fade active show no-padding" id="vtab1" aria-expanded="true">
<h4 style="margin-bottom: 15px;">Tab Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, adipisci.</p>
</div>
<div class="tab-pane fade no-padding" id="vtab2" aria-expanded="false">
...
</div>
<div class="tab-pane fade no-padding" id="vtab3">
...
</div>
</div>
</div>
Example:
Tab Title
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.
Tab Title
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.
Tab Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus laudantium reprehenderit facere, pariatur, eligendi libero nostrum quia deserunt nihil facilis, quo esse nesciunt.