Bootstrap 4 - Navbar

Previous
Quiz
Next

Description

Navbar provides navigation headers for your application or site. Navbars collapse in mobile views and become horizontal as the available viewport width increases.

Basic Navbar

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 −

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>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 −

Output

Brand / Logo

The brand or logo of the page can be highlighted by using the .navbar-brand class as shown in the below example −

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 −

Output

Navbar with Dropdown

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 −

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 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 −

Output

Navbar with Forms and Buttons

You can create form controls and button within navbar by using form-inline class to the <form> element as shown in the below example −

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 −

Output

Colored Navbars

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 −

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>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 −

Output

Fixed Navigation Bar

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 −

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 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 −

Output

Bottom Navigation Bar

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 −

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 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 −

Output

Sticky Navigation Bar

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 −

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 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 −

Output

bootstrap4_components.htm
Print Page
Previous
Next
Advertisements