Home ยป Bootstrap Tabs and Pills

Bootstrap Tabs and Pills

by Online Tutorials Library

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

You may also like