- Bootstrap 4 Tutorial
- Bootstrap 4 - Home
- Bootstrap 4 - Overview
- Bootstrap 4 - Environment Setup
- Bootstrap 4 - Layout
- Bootstrap 4 - Grid System
- Bootstrap 4 - Content
- Bootstrap 4 - Components
- Bootstrap 4 - Utilities
- Differences Between Bootstrap 3 and 4
- Bootstrap 4 Useful Resources
- Bootstrap 4 - Quick Guide
- Bootstrap 4 - Useful Resources
- Bootstrap 4 - Discussion
Bootstrap 4 - Navbar
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 −