Javatpoint Logo
Javatpoint Logo

Bootstrap Tabs and Pills


Bootstrap Menus

Menus are used in most of the web pages. These are defined in an unordered list <ul>. You have to add the .list-inline class to <ul> to create a horizontal menu.

See this example:

Test it Now

Bootstrap Tabs

You can create a basic navigation tag with <ul class="nav nav-tabs">. You can also mark the current page with <li class="active">.

The following example specifies how to create a simple navigation tab.

See this example:

Test it Now

Bootstrap Tabs with Dropdown Menu

You can also use tabs in a dropdown menu.

See this example:

Test it Now

Bootstrap Toggleable / Dynamic Tabs

Add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .tab-content, to make tags toggleable.

If you want the tabs to fade in and out when clicking on them, add the .fade class to .tab-pane .

See this example:

Test it Now

Bootstrap Pills

You can create pills with <ul class="nav nav-pills">. You can also mark the current page with <li class="active">.

See this example:

Test it Now

Bootstrap Vertical Pills

Add the .nav-stacked class to display the pills vertically.

See this example:

Test it Now

Bootstrap Pills with Dropdown Menu

You can also use dropdown menu with pills.

See this example:

Test it Now

Bootstrap Toggleable Dynamic Pills

It is same as toggleable dynamic tabs, the only change is the data-toggle attribute to data-toggle="pill" .

See this example:

Test it Now

Bootstrap 4 Tabs/ Pills

Nav Menus

Nav menus are navigation menus used in websites. If you want to create a simple horizontal menu in a website, add the .nav class to a <ul> element, followed by .nav-item for each <li> and add the .nav-link class to their links.

Example:

Test it Now

Aligned Nav

By default nav is aligned to left.

For Center Align: Add the .justify-content-center class to center align the nav.

For Right Align: Add the .justify-content-end class to right-align the nav.

Example:

Test it Now

Vertical Nav

Add the .flex-column class to create a vertical nav.

Example

Test it Now

Justified Tabs/ Pills

For justified tabs/pills, add the .nav-justified class (equal width):

Example:

Test it Now
Next TopicBootstrap Navbar




Help Others, Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA