Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Navs

Base Nav

If you want to create a simple horizontal menu use the .nav, .nav-item and .nav-link classes.

The .nav, .nav-item and .nav-link classes are used with <ul>, <li> and <a> element respectively.

Run code

Classes are used throughout, so your markup can be super flexible. Use <ul>s like above, <ol> if the order of your items is important, or roll your own with a <nav> element. Because the .nav uses display: flex, the nav links behave the same as nav items would, but without the extra markup.

Run code

Nav Alignment

By default, navs are left-aligned, but you can easily change them to center or right aligned.

Add the .justify-content-center class to center the nav.

Add the .justify-content-end class to right-align the nav.

Run code

Vertical Nav

Stack your navigation by changing the flex item direction with the .flex-column class.

Run code

As always, vertical navigation is possible without <ul>s, too.

Run code

Tabs

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface.

Add the .active class to the active/current link. If you want the tabs to be toggleable, see the second last example on this page.

Run code

Pills

Take that same HTML, but use .nav-pills instead.

If you want the pills to be toggleable, see the last example on this page.

Run code

Justified Tabs/Pills

For equal-width elements, use .nav-justified class. All horizontal space will be occupied by nav links.

Run code

Tabs with Dropdowns

Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

Run code

Pills with Dropdowns

Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

Run code

Toggleable / Dynamic Tabs

HOME

Home content.

Profile

Content in Profile.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Contacts

Content in Contacts.

Run code

Example explained:

To make the tabs toggleable, 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.

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

Add the .active class to the active/current link.

Add the .show class to show the content by default.


Toggleable / Dynamic Pills

HOME

Home content.

Profile

Content in Profile.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Contacts

Content in Contacts.

The same code applies to pills; only change the data-toggle attribute to data-toggle="pill".

Run code

Complete Bootstrap 4 Navs Reference

For a complete reference of all tab options, methods and events, visit our Bootstrap 4 JS Tab Reference.