Bootstrap 4 - Navbar

Navbar provides navigation headers for your application or site. Navbars collapse in mobile views and become horizontal as the available viewport width increases.
To create a basic navbar, add the .navbar class with responsive collapsing class .navbar-expand-xl|lg|md|sm (provides navbar on extra large, large, medium or small screens). To add links to the navbar, simply add an unordered list with the .navbar-nav class. To define each individual list item, add .nav-item class to <li> element and use the .nav-link class to an <a> element for individual links.
The following example demonstrates creation of a basic navbar −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Basic Navbar</h2>
         <nav class = "navbar navbar-expand-sm navbar-dark bg-secondary">
            <a class = "navbar-brand" href = "#">Navbar</a>
            <button class = "navbar-toggler" type = "button" data-toggle = "collapse" 
               data-target = "#navbarSupportedContent" 
               aria-controls = "navbarSupportedContent" aria-expanded = "false" 
               aria-label = "Toggle navigation">
               
               <span class = "navbar-toggler-icon"></span>
            </button>
            
            <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav mr-auto">
                  <li class = "nav-item active">
                     <a class = "nav-link" href = "#">Home 
                        <span class = "sr-only">(current)</span>
                     </a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
               </ul>
               
            </div>
         </nav>
      </div>
      
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src =" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −

Home 
                        (current)



About Us


Contact

The brand or logo of the page can be highlighted by using the .navbar-brand class as shown in the below example −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Brand</h2>
         <nav class = "navbar navbar-expand-sm bg-secondary navbar-dark">
            <a class = "navbar-brand" href = "#">Logo</a>
            <ul class = "navbar-nav">
               <li class = "nav-item active">
                  <a class = "nav-link" href = "#">Home 
                     <span class = "sr-only">(current)</span>
                  </a>
               </li>
               <li class = "nav-item">
                  <a class = "nav-link" href = "#">About Us</a>
               </li>
               <li class = "nav-item">
                  <a class = "nav-link" href = "#">Contact</a>
               </li>
            </ul>
         </nav>
         <br>
         
         <h2>Image Logo</h2>
         <nav class = "navbar navbar-expand-sm bg-secondary navbar-dark">
            <a class = "navbar-brand" href = "#">
               <img src = "https://www.tutorialspoint.com/bootstrap/images/logo.png" 
                  style = "width:120px;" alt = "">
            </a>
            <ul class = "navbar-nav">
               <li class = "nav-item active">
                  <a class = "nav-link" href = "#">Home 
                     <span class = "sr-only">(current)</span>
                  </a>
               </li>
               <li class = "nav-item">
                  <a class = "nav-link" href = "#">About Us</a>
               </li>
               <li class = "nav-item">
                  <a class = "nav-link" href = "#">Contact</a>
               </li>
            </ul>
            
         </nav>
      </div>
      
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −

Home 
                     (current)



About Us


Contact


Home 
                     (current)



About Us


Contact

Navbar can have dropdown menu by adding the dropdown code to the <li> element with the help of .dropdown class. The following example demonstrates this −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   <body>
      <div class = "container">
         <h2>Navbar With Dropdown</h2>
         <nav class = "navbar navbar-expand-sm bg-secondary navbar-dark">
            <a class = "navbar-brand" href = "#">Navbar</a>
            <button class = "navbar-toggler" type = "button" data-toggle = "collapse" 
               data-target = "#navbarNavDropdown" aria-controls = "navbarNavDropdown" 
               aria-expanded = "false" aria-label = "Toggle navigation">
               
               <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class = "collapse navbar-collapse" id = "navbarNavDropdown">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" href = "#">Home 
                        <span class = "sr-only">(current)</span>
                     </a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
                  <li class = "nav-item dropdown">
                     <a class = "nav-link dropdown-toggle" href = "#" 
                        id = "navbarDropdownMenuLink" role = "button" data-toggle = "dropdown" 
                        aria-haspopup = "true" aria-expanded = "false">
                        
                        Library
                     </a>
                     
                     <div class = "dropdown-menu" aria-labelledby = "navbarDropdownMenuLink">
                        <a class = "dropdown-item" href = "#">HTML-5</a>
                        <a class = "dropdown-item" href = "#">CSS-3</a>
                        <a class = "dropdown-item" href = "#">Bootstrap-4</a>
                     </div>
                  </li>
               </ul>
               
            </div>
         </nav>
      </div>
      
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity =" sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin =" anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −

Home 
                        (current)



About Us


Contact



                        
                        Library
                     

HTML-5
CSS-3
Bootstrap-4


You can create form controls and button within navbar by using form-inline class to the <form> element as shown in the below example −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Navbar with Form and Button</h2>
         <nav class = "navbar navbar-expand-sm bg-secondary navbar-dark">
            <form class = "form-inline">
               <input class = "form-control mr-sm-2" type = "text" placeholder = "Search your product">
               <button class = "btn btn-info" type = "submit">Search</button>
            </form>
         </nav>
      </div>
      
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −
Change the color of the navbar background by using background-color (.bg-*) utilities such as bg-primary, bg-dark etc. The following example demonstrates this −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Colored Navbars</h2>
         <nav class = "navbar navbar-expand-sm bg-light navbar-light">
            <a class = "navbar-brand" href = "#">Navbar</a>
            <button class = "navbar-toggler" type = "button" data-toggle = "collapse" 
               data-target = "#navbarSupportedContent" 
               aria-controls = "navbarSupportedContent" aria-expanded = "false" 
               aria-label = "Toggle navigation">
            
               <span class = "navbar-toggler-icon"></span>
            </button>
            
            <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class =" nav-link" href = "#">Home</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
               </ul>
            </div>
            
         </nav>
         <br>
         
         <nav class = "navbar navbar-expand-sm bg-secondary navbar-light">
            <a class = "navbar-brand" href = "#">Secondary Navbar</a>
            <button class = "navbar-toggler" type = "button" data-toggle = "collapse" 
               data-target = "#navbarSupportedContent" 
               aria-controls = "navbarSupportedContent" aria-expanded = "false" 
               aria-label = "Toggle navigation">
               
               <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" href = "#">Home</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
               </ul>
            </div>
         </nav>
         <br>
         
         <nav class = "navbar navbar-expand-sm bg-dark navbar-light">
            <a class = "navbar-brand" href = "#">Dark Navbar</a>
            <button class = "navbar-toggler" type = "button" data-toggle = "collapse" 
               data-target = "#navbarSupportedContent" 
               aria-controls = "navbarSupportedContent" aria-expanded = "false" 
               aria-label = "Toggle navigation">
               
               <span class="navbar-toggler-icon"></span>
            </button>
            <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" href = "#">Home</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
               </ul>
            </div>
         </nav>
         <br>
         
         <nav class = "navbar navbar-expand-sm bg-primary navbar-light">
            <a class = "navbar-brand" href = "#">Primary Navbar</a>
            <button class = "navbar-toggler" type = "button" data-toggle = "collapse" 
               data-target = "#navbarSupportedContent" 
               aria-controls = "navbarSupportedContent" aria-expanded = "false" 
               aria-label = "Toggle navigation">
               
               <span class="navbar-toggler-icon"></span>
            </button>
            <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" href = "#">Home</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
               </ul>
            </div>
         </nav>
         <br>
         
         <nav class = "navbar navbar-expand-sm bg-success navbar-light">
            <a class = "navbar-brand" href = "#">Success Navbar</a>
            <button class = "navbar-toggler" type = "button" data-toggle = "collapse" 
               data-target = "#navbarSupportedContent" 
               aria-controls = "navbarSupportedContent" aria-expanded = "false" 
               aria-label = "Toggle navigation">
               
               <span class = "navbar-toggler-icon"></span>
            </button>
            <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" href = "#">Home</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
               </ul>
            </div>
         </nav>
         <br>
         
         <nav class = "navbar navbar-expand-sm bg-info navbar-light">
            <a class = "navbar-brand" href = "#">Info Navbar</a>
            <button class = "navbar-toggler" type = "button" data-toggle = "collapse" 
               data-target = "#navbarSupportedContent" 
               aria-controls = "navbarSupportedContent" aria-expanded = "false" 
               aria-label = "Toggle navigation">
               
               <span class = "navbar-toggler-icon"></span>
            </button>
            <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" href = "#">Home</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
               </ul>
            </div>
         </nav>
         <br>
         
         <nav class = "navbar navbar-expand-sm bg-warning navbar-light">
            <a class = "navbar-brand" href = "#">Warning Navbar</a>
            <button class = "navbar-toggler" type = "button" data-toggle = "collapse" 
               data-target = "#navbarSupportedContent" 
               aria-controls = "navbarSupportedContent" aria-expanded = "false" 
               aria-label = "Toggle navigation">
            
               <span class = "navbar-toggler-icon"></span>
            </button>
            <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" href = "#">Home</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
               </ul>
            </div>
         </nav>
         <br>
         
         <nav class = "navbar navbar-expand-sm bg-danger navbar-light">
            <a class = "navbar-brand" href = "#">Danger Navbar</a>
            <button class = "navbar-toggler" type = "button" data-toggle = "collapse" 
               data-target = "#navbarSupportedContent" 
               aria-controls = "navbarSupportedContent" aria-expanded = "false" 
               aria-label = "Toggle navigation">
               
               <span class = "navbar-toggler-icon"></span>
            </button>
            <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
               <ul class = "navbar-nav">
                  <li class = "nav-item active">
                     <a class = "nav-link" href = "#">Home</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">About Us</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">Contact</a>
                  </li>
               </ul>
            </div>
            
         </nav>
      </div>
      
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −

Home


About Us


Contact


Home


About Us


Contact


Home


About Us


Contact


Home


About Us


Contact


Home


About Us


Contact


Home


About Us


Contact


Home


About Us


Contact


Home


About Us


Contact

The Bootstrap navbar can be dynamic in its positioning. You can place it on the top by adding the .fixed-top class to the .navbar class. The following example demonstrates this −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body style = "height:2000px">
      <div class = "container">
         <nav class = "navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
            <a class = "navbar-brand" href = "#">Fixed Top</a>
            <ul class = "navbar-nav">
               <li class = "nav-item active">
                  <a class = "nav-link" href = "#">Home</a>
               </li>
               <li class = "nav-item">
                  <a class = "nav-link" href = "#">About Us</a>
               </li>
               <li class = "nav-item">
                  <a class = "nav-link" href = "#">Contact</a>
               </li>
            </ul>
         </nav>
         <div class = "container-fluid" style = "margin-top:80px">
            <h4>This is Fixed Navigation Bar...Scroll this page to see the effect</h4>
         </div>
      </div>
      
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src =" https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −

Home


About Us


Contact

If you want the navbar to be fixed at the bottom of the page, then add the .fixed-bottom class to the .navbar class. The following example demonstrates this −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body style = "height:2000px">
      <div class = "container">
         <nav class = "navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
            <a class = "navbar-brand" href = "#">Fixed Bottom</a>
            <ul class = "navbar-nav">
               <li class = "nav-item active">
                  <a class = "nav-link" href = "#">Home</a>
               </li>
               <li class = "nav-item">
                  <a class = "nav-link" href = "#">About Us</a>
               </li>
               <li class = "nav-item">
                  <a class = "nav-link" href = "#">Contact</a>
               </li>
            </ul>
         </nav>
         
         <div class = "container-fluid" style = "margin-top:80px">
            <h4>This is Bottom Fixed Navigation Bar...Scroll this page to see the effect</h4>
         </div>
      </div>
      
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src =" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −

Home


About Us


Contact

You can make the navbar fixed at top of the page, when you scroll the page by using the .sticky-top class which will be added to the .navbar class. The following example demonstrates this −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body style = "height:2000px">
      <div class = "container-fluid">
         <div class = "container-fluid" style = "margin-top:80px">
            <h4>This is Sticky Navigation Bar...Scroll this page to see the effect</h4>
         </div>
      </div>
      
      <nav class = "navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
         <a class = "navbar-brand" href = "#">Sticky Top</a>
         <ul class = "navbar-nav">
            <li class = "nav-item active">
               <a class = "nav-link" href = "#">Home</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">About Us</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Contact</a>
            </li>
         </ul>
      </nav>
      
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
     
   </body>
</html>
It will produce the following result −

Home


About Us


Contact


    26 Lectures 
     2 hours 

 Anadi Sharma

    54 Lectures 
     4.5 hours 

 Frahaan Hussain

    161 Lectures 
     14.5 hours 

 Eduonix Learning Solutions

    20 Lectures 
     4 hours 

 Azaz Patel

    15 Lectures 
     1.5 hours 

 Muhammad Ismail

    62 Lectures 
     8 hours 

 Yossef Ayman Zedan
 Print
 Add Notes
 Bookmark this page