Home » Bootstrap 3 » Tutorial on Bootstrap 3 Tabs and Pills

Tutorial on Bootstrap 3 Tabs and Pills

Bootstrap 3 tab and pills are the nav component, the pills are mainly used in the navbar and the tab is used on javascript van bar to show regarding hiding portion like an accordion.

Basic Menu

To make a basic menu use an unordered list and inside li give anchor 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 the class name .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 the class name .nav and .nav-tabs on ul of an 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 class name .dropdown in a li and on clicking the dropdown will open use the class name .dropdown-toggle and data-toggle="dropdown" on the anchor tag and inside the li write another unordered list with the 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 toggleable tab that is on click on a tab will related content, use data-toggle="tab" and give the id on the anchor tag href with # the tag of the chield div of parent div with the class name .tab-content and to show a tab initially use the class name .active on the tab and use class name .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 the 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 class name .dropdown in a li and on clicking the dropdown will open use the class name .dropdown-toggle and data-toggle="dropdown" on the anchor tag and inside the li write another unordered list with the 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 toggleable pills that are on click on a tab will related content, use data-toggle="pills" and give the id on the anchor tag href with # the tag of the chield div of parent div with the class name .tab-content and to show a tab initially use the class name .active on the tab and use the class name .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">

Try it yourself

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

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

Thanks for Reading