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:
<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
<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:
<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:
<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:
<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:
<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:
<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:
<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:
<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:
<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:
<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:
<ul class="nav nav-tabs nav-justified">
or
<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