In Bootstrap 4 Navigation Tutorial With Example, you will learn how to create Bootstrap navigation components. You can easily add navigation tabs and pills with Bootstrap’s .nav class. Bootstrap 3 doesn’t use the .nav-item or .nav-link classes. Bootstrap 4 requires .nav-item to be applied to any <li>elements. Bootstrap 4 require .nav-link  to be applied to the <a> element.

Bootstrap 4 Navigation Tutorial With Example

Bootstrap 4 provide multiple options for displaying navigation for your website. To create basic navigation components like tabs and pills as well as simple links which are very flexible and elegant.

#1: Bootstrap 4 Navigation

Bootstrap 4 Navigation can be displayed by using lists and applying the .nav class to the <ul> element. Navigation menu items are made by applying the .nav-item class to the <lielements. Last, the links ( <a> elements) should have the .nav-link class applied to them.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navigation Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<br>
<div class="container">
  <h2>Navigation</h2>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Bootstrap</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Laravel</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Angular</a>
    </li>
  </ul>
</div>
</body>
</html>

The example of Bootstrap navigation will look like below screenshot.

Bootstrap 4 Navigation Example

#2: Bootstrap 4 Aligned Navigation

Add the .justify-content-center you can align the navigation menu to the center of its container and the .justify-content-end you can align it by the right side of its container.

Certain classes must be applied to the <ul> element to take effect.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navigation Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<br>
<div class="container">
  <h2>Aligned Navigation</h2>
  <p>Left-aligned navigation (default):</p>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Bootstrap</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Laravel</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Angular</a>
    </li>
  </ul>
  <p class="text-center">Centered navigation:</p>
  <ul class="nav justify-content-center">
    <li class="nav-item">
      <a class="nav-link" href="#">Bootstrap</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Laravel</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Angular</a>
    </li>
  </ul>
  <p class="text-right">Right-aligned navigation:</p>
  <ul class="nav justify-content-end">
    <li class="nav-item">
      <a class="nav-link" href="#">Bootstrap</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Laravel</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Angular</a>
    </li>
  </ul>
</div>
</body>
</html>

The example of Bootstrap aligned navigation will look like below screenshot.

Bootstrap 4 Aligned Navigation Example

#3: Bootstrap 4 Vertical Navigation

You can apply the .flex-column class to the <ul> to make the navigation menu vertical.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navigation Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<br>
<div class="container">
<h2>Vertical Navigation</h2>
  <ul class="nav flex-column">
    <li class="nav-item">
      <a class="nav-link" href="#">Bootstrap</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Laravel</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Angular</a>
    </li>
  </ul>
</div>
</body>
</html>

The example of Bootstrap vertical navigation will look like below screenshot.

Bootstrap 4 Vertical Navigation Example

#4: Bootstrap 4 Navigation Tabs

Turn the navigation menu into navigation tabs with a .nav-tabs class. You can add the active class to the active/current link.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navigation Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<br>
<div class="container">
<h2>Navigation Tabs</h2>
<ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Bootstrap</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Laravel</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Angular</a>
    </li>
  </ul>
</div>
</body>
</html>

The example of Bootstrap navigation tabs will look like below screenshot.

Bootstrap 4 Navigation Tabs Example

#5: Bootstrap 4 Navigation Pills

Turn the navigation menu into navigation pills with the .nav-pills class to the <ul> element to display the menu options as pills.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navigation Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<br>
<div class="container">
<h2>Navigation Pills</h2>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#">Bootstrap</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Laravel</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Angular</a>
    </li>
  </ul>
</div>
</body>
</html>

The example of Bootstrap navigation pills will look like below screenshot.

Bootstrap 4 Navigation Pills Example

#6: Bootstrap 4 Navigation Justified Tabs/pills

You can justify the tabs/pills with the .nav-justified class to the <ul> element to display the menu options as tabs of equal width, taking up the full width of their container.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navigation Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<br>
<div class="container">
<h2>Navigation Justified Tabs/Pills</h2>
<p>Justified pills:</p>
<ul class="nav nav-pills nav-justified">
    <li class="nav-item">
      <a class="nav-link active" href="#">Bootstrap</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Laravel</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Angular</a>
    </li>
  </ul><br>

  <p>Justified tabs:</p>
  <ul class="nav nav-tabs nav-justified">
    <li class="nav-item">
      <a class="nav-link active" href="#">Bootstrap</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Laravel</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Angular</a>
    </li>
  </ul>
</div>
</body>
</html>

The example of Bootstrap navigation justified tabs/pills will look like below screenshot.

Bootstrap 4 Navigation Justified Tabs-Pills Example

#7: Bootstrap 4 Navigation Tabs With Dropdown

You can add a dropdown menu to a tab. In this case, the .dropdown class is applied to a <li> element.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navigation Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<br>
<div class="container">
<h2>Tabs with Dropdown</h2>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Bootstrap</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Laravel</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Laravel 5.5</a>
        <a class="dropdown-item" href="#">Laravel 5.6</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Angular</a>
    </li>
  </ul>
</div>
</body>
</html>

The example of Bootstrap navigation tabs with dropdown will look like below screenshot.

Bootstrap 4 Navigation Tabs with Dropdown Example

#8: Bootstrap 4 Navigation Pills With Dropdown

You can add a dropdown menu to pills. In this case, the .dropdown class is applied to a <li> element.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navigation Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<br>
<div class="container">
<h2>Pills with Dropdown</h2>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#">Bootstrap</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Laravel</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Laravel 5.5</a>
        <a class="dropdown-item" href="#">Laravel 5.6</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Angular</a>
    </li>
  </ul>
</div>
</body>
</html>

The example of Bootstrap navigation pills with dropdown will look like below screenshot.

Bootstrap 4 Navigation Pills with Dropdown Example

#9: Bootstrap 4 Navigation Toggleable/Dynamic Tabs

Collapsibles can also work with navigation menus. You can create toggleable tabs or pills.

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

You can tab to fade in and out effect.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navigation Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<br>
<div class="container">
<h2>Toggleable/Dynamic Tabs</h2>
<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#bootstrap">Bootstrap</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#laravel">Laravel</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#angular">Angular</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="bootstrap" class="container tab-pane active"><br>
      <h3>Bootstrap</h3>
      <p>Hello Bootstrap</p>
    </div>
    <div id="laravel" class="container tab-pane fade"><br>
      <h3>Laravel</h3>
      <p>Hello Laravel</p>
    </div>
    <div id="angular" class="container tab-pane fade"><br>
      <h3>Angular</h3>
      <p>Hello Angular</p>
    </div>
  </div>
</div>
</body>
</html>

The example of Bootstrap navigation Toggleable/Dynamic Tabs with dropdown will look like below screenshot.

Bootstrap 4 Navigation Toggleable-Dynamic Tabs Example

#10:Bootstrap 4 Navigation Toggleable/Dynamic Pills

The same code applies to pills. Only one change the data-toggle attribute to data-toggle=”pill”.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navigation Tutorial With Example</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<br>
<div class="container">
<h2>Toggleable/Dynamic Pills</h2>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#bootstrap">Bootstrap</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#laravel">Laravel</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#angular">Angular</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="bootstrap" class="container tab-pane active"><br>
      <h3>Bootstrap</h3>
      <p>Hello Bootstrap</p>
    </div>
    <div id="laravel" class="container tab-pane fade"><br>
      <h3>Laravel</h3>
      <p>Hello Laravel</p>
    </div>
    <div id="angular" class="container tab-pane fade"><br>
      <h3>Angular</h3>
      <p>Hello Angular</p>
    </div>
  </div>
</div>
</body>
</html>

The example of Bootstrap navigation Toggleable/Dynamic Pills with dropdown will look like below screenshot.

Bootstrap 4 Navigation Toggleable-Dynamic Pills Example
At last, our Bootstrap 4 Navigation Tutorial With Example is over.

Post Your Thoughts

This site uses Akismet to reduce spam. Learn how your comment data is processed.