Tutorial on Bootstrap 3 Tabs and Pills

Bootstrap 3 tab and pils are the nav component, the pils are mainly used in navbar and the tab is used on javascript van bar to show regarding hide portion like accordian.</

Basic Menu

To make a basic menu use an unordered list and inside li give anchar link

Example:

Try it yourself

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

Make a basic menu inline

to make a basic menu inline have to use classname .list-inline in ul

Example

 

Try it yourself

<ul class="list-inline">
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

Bootstrap 3 tabs

make a bootstrap 3 tabs by using class name .nav and .nav-tabs on ul of a unordered list.

Example:

 

Try it yourself

<ul class="nav nav-tabs">
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

active and disabled status of bootstrap 3 tab

to make a li active and disabled use class name .active and .disabled accordingly

Example:

 

Try it yourself

<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">Menu 1</a></li>
	<li class="disabled"><a href="#">Menu 2</a></li>
	<li><a href="#">Menu 3</a></li>
</ul>

Bootstrap 3 tabs with dropdown

to make a dropdown in a tab use classname .dropdown in a li and on click the dropdown eill open use classname .dropdown-toggle and data-toggle="dropdown" on the acvhor tag and inside the li write another unordered list with class name .dropdown-menu in the ul.

Example:

 

Try it yourself

<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1</a>
		<ul class="dropdown-menu">
			<li><a href="#">Menu</a></li></li>
			<li><a href="#">Menu</a></li></li>
			<li><a href="#">Menu</a></li></li>
		</ul>
	</li>
	<li class="disabled"><a href="#">Menu 2</a></li>
	<li><a href="#">Menu 3</a></li>
</ul>

Dynamic or toggleable bootstrap 3 tabs

create a toggleble tab that is on click on a tab will related content, use data-toggle="tab" and give the id on the ancher tag href with # tag of the chield div of parrent div with class name .tab-content and to show a tab initially use classname .active on the tab and use classname .in and .active on the related div.

Example:

 

Try it yourself

<ul class="nav nav-tabs">
	<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
	<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
	<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
	<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
	<div id="home" class="tab-pane fade in active">
	  <h3>HOME</h3>
	  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</div>
	<div id="menu1" class="tab-pane fade">
	  <h3>Menu 1</h3>
	  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	</div>
	<div id="menu2" class="tab-pane fade">
	  <h3>Menu 2</h3>
	  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
	</div>
	<div id="menu3" class="tab-pane fade">
	  <h3>Menu 3</h3>
	  <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
	</div>
</div>

Bootstrap 3 pills

to make a bootstrap 3 pills use class name .nav and .nav-pills in an unordered list’s ul

Example:

 

Try it yourself

<ul class="nav nav-pills">

Make vertical pills

to make verticle pills use class name nav and .nav-pills and .nav-stacked in an unordered list’s ul

Example:

 

Try it yourself

<ul class="nav nav-pills nav-stacked">

Active and disabled pills

to make active and disable pills use .active and .disabled class accordingly in li tag.

Example:

 

Try it yourself

<ul class="nav nav-pills">
	<li class="active"><a href="#">Home</a></li>
	<li class="disabled"><a href="#">Menu</a></li>
	<li><a href="#">Menu 3</a></li>
</ul>

Dropdown menu in pills

as like tab dropdown menu use classname .dropdown in a li and on click the dropdown eill open use classname .dropdown-toggle and data-toggle="dropdown" on the acvhor tag and inside the li write another unordered list with class name .dropdown-menu in the ul.

Example:

 

Try it yourself

<ul class="nav nav-pills">
	<li class="active"><a href="#">Home</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1</a>
		<ul class="dropdown-menu">
			<li><a href="#">Menu</a></li></li>
			<li><a href="#">Menu</a></li></li>
			<li><a href="#">Menu</a></li></li>
		</ul>
	</li>
	<li class="disabled"><a href="#">Menu 2</a></li>
	<li><a href="#">Menu 3</a></li>
</ul>

Dynamic or toggleable bootstrap 3 pills

create a toggleble pills that is on click on a tab will related content, use data-toggle="pills" and give the id on the ancher tag href with # tag of the chield div of parrent div with class name .tab-content and to show a tab initially use classname .active on the tab and use classname .in and .active on the related div.

Example:

 

Try it yourself

<ul class="nav nav-pills">
	<li class="active"><a data-toggle="pills" href="#home">Home</a></li>
	<li><a data-toggle="pills" href="#menu1">Menu 1</a></li>
	<li><a data-toggle="pills" href="#menu2">Menu 2</a></li>
	<li><a data-toggle="pills" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
	<div id="home" class="tab-pane fade in active">
	  <h3>HOME</h3>
	  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</div>
	<div id="menu1" class="tab-pane fade">
	  <h3>Menu 1</h3>
	  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	</div>
	<div id="menu2" class="tab-pane fade">
	  <h3>Menu 2</h3>
	  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
	</div>
	<div id="menu3" class="tab-pane fade">
	  <h3>Menu 3</h3>
	  <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
	</div>
</div>

Make center bootstrap 3 tab and pills

use class name .nav-justified on ul of nav tab or nav pills to make a tab or pills centered

Example:

 

Try it yourself

<ul class="nav nav-tabs nav-justified">

or

 

Try it yourself

<ul class="nav nav-pills nav-justified">

I hope the post Bootstrap 3 tab and pils , helped you please provide your comment to make the site better and more useful.

Thanks for Reading

Share The Post On -

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.