Bootstrap 4 Navbar Tutorial With Example

In Bootstrap 4 Navbar Tutorial With Example, you will learn how to create Bootstrap navbar components.  A navigation bar is used for holding the navigation interface of a website and is usually displayed above or on the side of content. Bootstrap 4 navbar uses the various helper classes.

Bootstrap 4 Navbar Tutorial With Example

You can use Bootstrap navbar component to create a responsive navigation header for your application or website. This responsive navbar initially collapsed on devices having small viewports like cell-phones but expand when user click the toggle button. It will be horizontal as normal on the medium and large devices like a laptop or desktop.

#1: Bootstrap 4 Navbar

A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class:

  • .navbar-expand-sm
  • .navbar-expand-mg
  • .navbar-expand-lg
  • .navbar-expand-xl

Add links inside the navbar, use a <ul> element with .navbar-nav class. Then add <li> elements with .nav-item class followed by an <an> element with a .nav-link class.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navbar 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>
<nav class="navbar navbar-expand-sm bg-light">
  <ul class="navbar-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>
</nav>
<br>
<div class="container">
<h2>Navbar</h2>
</div>
</body>
</html>

The example of Bootstrap navbar will look like below screenshot.

Bootstrap 4 Navbar Example

#2: Bootstrap 4 Vertical Navbar

If you want to create vertical navbar then simply remove the .nabar-expand-xl|lg|md| sm class.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navbar 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>
<nav class="navbar bg-light">
  <ul class="navbar-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>
</nav>
<br>
<div class="container">
<h2>Vertical Navbar</h2>
</div>
</body>
</html>

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

Bootstrap 4 Navbar Tutorial

#3: Bootstrap 4 Centered Navbar

You can add the .justify-content-center class to center the navigation bar.

The following example will center a navigation bar on medium, large and extra large screens. On small screens, it will be displayed vertically and left-aligned.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navbar 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>
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  <ul class="navbar-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>
</nav>
<br>
<div class="container">
<h2>Center Navbar</h2>
</div>
</body>
</html>

The example of Bootstrap center navbar will look like below screenshot.

Bootstrap 4 Center Navbar Example

#4: Bootstrap 4 Colored Navbar

You can use below any of the .bg-color classes to change the background color of the navbar.

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navbar 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>
<div class="container">
<h2>Colored Navbar</h2>
</div>
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <ul class="navbar-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>
</nav>
<br>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <ul class="navbar-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>
</nav>
<br>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <ul class="navbar-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>
</nav>
<br>
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
  <ul class="navbar-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>
</nav>
<br>
<nav class="navbar navbar-expand-sm bg-info navbar-dark">
  <ul class="navbar-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>
</nav>
<br>
<nav class="navbar navbar-expand-sm bg-warning navbar-dark">
  <ul class="navbar-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>
</nav>
<br>
<nav class="navbar navbar-expand-sm bg-danger navbar-dark ">
  <ul class="navbar-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>
</nav>
<br>
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
  <ul class="navbar-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>
</nav>
</body>
</html>

The example of Bootstrap colored navbar will look like below screenshot.

Bootstrap 4 Colored Navbar Example

You can also add Active/disabled state.

It is also possible to add a brand/logo to the navigation bar by adding an <a> element with a .navbar-brand class and an <img> element inside, displaying the image you would like to have as the logo. These will nice scale the image to fit into your navigation bar.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navbar 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>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">
    <img src="/images/logo.jpg" alt="logo">
  </a>
  <ul class="navbar-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>
</nav>
<br>
<div class="container">
<h2>Navbar Brand/logo</h2>
</div>
</body>
</html>

The example of Bootstrap navbar brand/logo will look like below screenshot.

Bootstrap 4 Navbar Brand-logo Example

#6: Bootstrap 4 Collapse Navbar

The navigation bar can be a collapsible element. In small screens, you need to hide the navigation links and replace them with the button that should reveal them when clicked on.

To create the collapsible navigation bar, use a button with class .navbar-toggler, data-toggle=”collapse” and data-target=”#target”.

Then wrap the navbar content (links) inside the div element with class=”collapse navbar-collapse” followed by an id that matches the data-target of the button: “target”.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navbar 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>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">
    <img src="/images/logo.jpg" alt="logo">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsiblenavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsiblenavbar">
  <ul class="navbar-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>
  </div>
  </ul>
</nav>
<br>
<div class="container">
<h2>Collapsible Navbar</h2>
</div>
</body>
</html>

The example of Bootstrap collapse navbar will look like below screenshot.

Bootstrap 4 Collapsible Navbar Example

#7: Bootstrap 4 Navbar With Dropdown

Dropdowns are compatible with the navigation bar.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navbar 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>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">
    <img src="/images/logo.jpg" alt="logo">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsiblenavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsiblenavbar">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Bootstrap</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Laravel
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Laravel 5.5</a>
        <a class="dropdown-item" href="#">Laravel 5.6</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Angular</a>
    </li>
  </div>
  </ul>
</nav>
<br>
<div class="container">
<h2>Navbar With Dropdown</h2>
</div>
</body>
</html>

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

Bootstrap 4 Navbar With Dropdown Example

#8: Bootstrap 4 Navbar Forms and Buttons

To create forms inside navigation bar use the .form-inline class on the <form> element.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navbar 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>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <form class="form-inline" action="">
    <input class="form-control mr-sm-2" type="text" placeholder="Search">
    <button class="btn btn-primary" type="submit">Search</button>
  </form>
</nav>
<br>
<div class="container">
<h2>Navbar Form</h2>
</div>
</body>
</html>

The example of Bootstrap navbar form will look like below screenshot.

Bootstrap 4 Navbar Form Example

#9: Bootstrap 4 Navbar Input Class

You can also use input classes, such as .input-group-append or .input-group-prepend to attach an icon or help text next to the input field.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navbar 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>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <form class="form-inline" action="">
    <div class="input-group">
    <input type="text" class="form-control" placeholder="Username">
      <div class="input-group-prepend">
        <span class="input-group-text">@gmail.com</span>
      </div>
    </div>  
  </form>
</nav>
<br>
<div class="container">
<h2>Navbar Input Class</h2>
</div>
</body>
</html>

The example of Bootstrap navbar input class will look like below screenshot.

Bootstrap 4 Navbar Input Class Example

#10: Bootstrap 4 Navbar Text

You can use the .navbar-text class to vertical align any elements inside the navbar that do not link.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navbar 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>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <span class="navbar-text">
    InvestmentNovel
  </span>
  <ul class="navbar-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>
  </div>
  </ul>
</nav>
<br>
<div class="container">
<h2>Navbar Text</h2>
</div>
</body>
</html>

The example of Bootstrap navbar text will look like below screenshot.

Bootstrap 4 Navbar Text Example

#11: Bootstrap 4 Fixed Navbar

The navigation bar can also be fixed at the top or at the bottom of the page. A fixed navigation bar stays visible in a fixed position independent of the page scroll.

A .fixed-top class makes the navigation bar fixed at the top and .fixed-bottom class makes the navigation bar fixed at the bottom.

Example of Top Fixed Navbar

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navbar 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>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <ul class="navbar-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>
  </div>
  </ul>
</nav>
<div class="container" style="margin-top:80px">
<h2>Top Fixed Navbar</h2>
</div>
</body>
</html>

The example of Bootstrap top fixed navbar will look like below screenshot.

Bootstrap 4 Top Fixed Navbar Example

Example of Bottom Fixed Navbar

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navbar 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>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  <ul class="navbar-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>
  </div>
  </ul>
</nav>
<div class="container" style="margin-top:280px">
<h2>Bottom Fixed Navbar</h2>
</div>
</body>
</html>

The example of Bootstrap bottom fixed navbar will look like below screenshot.

Bootstrap 4 Bottom Fixed Navbar Example

#12: Bootstrap 4 Sticky Navbar

You can use the .sticky-top class to make the navbar fixed(stay) at the top of the page when you scroll past it.

Note : sticky-top does not work in IE11 and earlier.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Navbar 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>
<div class="container">
<h2>Sticky Navbar</h2>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  <ul class="navbar-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>
  </div>
  </ul>
</nav>
<div class="container">
  <br>
  <p>Hello Investmentnovel. Hello Investmentnovel. Hello Investmentnovel. Hello Investmentnovel. Hello Investmentnovel.</p>
  <p>Hello Investmentnovel. Hello Investmentnovel. Hello Investmentnovel. Hello Investmentnovel. Hello Investmentnovel.</p>
  <p>Hello Investmentnovel. Hello Investmentnovel. Hello Investmentnovel. Hello Investmentnovel. Hello Investmentnovel.</p>
</div>
</body>
</html>

The example of Bootstrap sticky navbar will look like below screenshot.

Bootstrap 4 Sticky Navbar Example

At last, our Bootstrap 4 Navbar Tutorial With Example is over.

Post Your Thoughts

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