Bootstrap 4 Navs
Add navigation tabs and pills easily with Bootstrap's .nav class.
Bootstrap's .nav class (and associated classes) lets you turn a list into tabs and navigation "pills".
To add a tab or nav pill, add the .nav class and either .nav-pills or .nav-tabs to a <ul> element containing the list of navigation items.
However, using a <ul> is not a requirement — you can just as easily use navs on their own.
Base Nav
Bootstrap 4 provides a base style that you can use with nav items. You can either add further Bootstrap styles to this base or customize it according to your own needs.
The base nav component uses the .nav class on the outer navigation element such as a <ul> or <nav> element.
On <ul> Elements
On <nav> Elements
Bootstrap 4 vs Bootstrap 3
- Bootstrap 3 doesn't use the
.nav-itemor.nav-linkclasses. - Bootstrap 4 requires
.nav-itemto be applied to any<li>elements. - Bootstrap 4 requires
.nav-linkto be applied to the<a>element. - Bootstrap 3 requires any
.activeclass to be applied to the<li>element. - Bootstrap 4 requires any
.activeclass to be applied to the<a>element.
Vertical Navs
Add the .flex-column utility class to the .nav element to stack the nav items vertically.
Tabs
Add class="nav nav-tabs" to the <ul> element containing the list of navigation items.
Also use class="active" to make a tab the selected tab.
Pills
Change nav-tabs to nav-pills to display pills instead.
Vertical Pills
As with any nav, you can stack pills vertically by adding the .flex-column utility class to the class list.
Disabled Links
You can add Bootstrap's .disabled class to make a tab or pill appear to be disabled.
Note that this only makes the nav look disabled. It doesn't actually disabled any <a> functionality, so you will need to use other means to actually disable that element (such as JavaScript).
Tabs with Dropdown Menus
You can add a dropdown menu to a tab or pill. In this case, the .dropdown class is applied to a <li> element (not a <div> element).
Tabs
Pills
Tabbable Panes
You can even use Bootstrap to create tabbable panels of content.
To do this, ensure each <a> in the navigation has data-toggle="tab" or data-toggle="pill" (depending on whether you're using tabs or pills). Then, beneath the tab list, add a <div> with the .tab-content class. This will contain the content. Then, for each piece of content, nest another <div> with the .tab-pane class.
Also, you can make tabs fade in by adding the .fade class to each .tab-pane. The first tab pane (or the active tab pane) must also have the .show class to properly fade in initial content.