Bootstrap 4 Navs, How To Learn Bootstrap 4 Navs Tutorial

Bootstrap 4 Tutorial

Bootstrap 4 Navs

Bootstrap's included navigation components 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.

Base Nav Menus

Bootstrap navs followed by .nav-item for each <li> and add the .nav-link class to their links

<ul class="nav">
  <li class="nav-item active">
    <a class="nav-link" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Output :

On <ul> Elements

<nav class="nav">
	<a class="nav-link active" href="#">Active</a>
	<a class="nav-link" href="#">Link</a>
	<a class="nav-link" href="#">Link</a>
	<a class="nav-link" href="#">Disabled</a>
</nav>

Output :

Alignment Nav Menus

Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center (.justify-content-center) or right(.justify-content-end) aligned.

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

<hr />

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Output :

Vertical Navs

Add the .flex-column utility class to the .nav element to stack the nav items vertically.

<nav class="nav flex-column">
	<a class="nav-link active" href="#">Active</a>
	<a class="nav-link" href="#">Link</a>
	<a class="nav-link" href="#">Link</a>
	<a class="nav-link disabled" href="#">Disabled</a>
</nav>

Output :

Tabs

The basic bootstrap nav adds the .nav-tabs class to generate a tabbed interface. .

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Output :

Pills

The bootstrap nav menu into navigation pills with the .nav-pills class.

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Output :

Justified Tabs/pills

Justify the tabs/pills with the equal width .nav-justified class

<ul class="nav nav-tabs nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

<br /><br />

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Output :

Tabs/Pills with Dropdowns

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).

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">HTML</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Bootstrap</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Bootstrap 3</a>
      <a class="dropdown-item" href="#">Bootstrap 4</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">JavaScript</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">jQuery</a>
  </li>
</ul>

<br /><br />

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">HTML</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Bootstrap</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Bootstrap 3</a>
      <a class="dropdown-item" href="#">Bootstrap 4</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">JavaScript</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">jQuery</a>
  </li>
</ul>

Output :

Toggleable / Dynamic Tabs

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.

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.

<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#html5">HTML5</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#css3">CSS3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#bootstrap4">Bootstrap 4</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="html5" class="container tab-pane active">
      <h3>HTML5</h3>
      <p>HTML5 (No space between "HTML" and "5")is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current version of the HTML standard.</p>
    </div>
    <div id="css3" class="container tab-pane fade">
      <h3>CSS3</h3>
      <p>The CSS was started to develop around 1998. And till 2009, it was under development. The first working draft of CSS3 came in 19-01-2001. but it was initially declared early in the June 1999.</p>
    </div>
    <div id="bootstrap4" class="container tab-pane fade">
      <h3>Bootstrap 4</h3>
      <p>Bootstrap 4 alpha 1 was released on 19th August 2015. Since then there have been many alpha releases. And finally after that on 10th August 2017, Bootstrap released the first beta for the version 4 of Bootstrap.</p>
    </div>
  </div>

Output :

Bootstrap 4 Tutorial