Bootstrap 4 | Navigation Bar - GeeksforGeeks

28 Jul, 2021
A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest. The navigation bar is placed at the top of the page.Basic Navigation Bar: The .navbar class is used to create a navigation bar. The navbar is created responsive by using .navbar-expand-xl|lg|md|sm class. The responsive navbar is vertically stacked in small screens. The <class=”nav-item”> element followed by <a class=”nav-link”> is used to create nav link.Example:  
html
<!DOCTYPE html><html lang="en"><head>    <title>Navigation Bar</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.3.1/css/bootstrap.min.css">         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head> <body style="text-align:center;">         <div class="container">                 <h1 style="color:green;">            GeeksforGeeks        </h1>                 <h2>Navigation Bar</h2>                 <nav class="navbar navbar-expand-sm bg-light">                         <ul class="navbar-nav">                <li class="nav-item">                    <a class="nav-link" href="#">Home</a>                </li>                             <li class="nav-item">                    <a class="nav-link" href="#">Algo</a>                </li>                             <li class="nav-item">                    <a class="nav-link" href="#">DS</a>                </li>                             <li class="nav-item">                    <a class="nav-link" href="#">Languages</a>                </li>            </ul>        </nav>    </div></body> </html>                   
Output:  
Vertical Navbar: The .navbar-expand-xl|lg|md|sm class is used to create vertical navigation bar.Example:  
html
<!DOCTYPE html><html lang="en"><head>    <title>Navigation Bar</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.3.1/css/bootstrap.min.css">         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head> <body style="text-align:center;">         <div class="container">                 <h1 style="color:green;">            GeeksforGeeks        </h1>                 <h2>Vertical Navbar</h2>                 <nav class="navbar navbar-expand-xl|lg|md|sm">                         <ul class="navbar-nav">                <li class="nav-item">                    <a class="nav-link" href="#">Home</a>                </li>                             <li class="nav-item">                    <a class="nav-link" href="#">Algo</a>                </li>                             <li class="nav-item">                    <a class="nav-link" href="#">DS</a>                </li>                             <li class="nav-item">                    <a class="nav-link" href="#">Languages</a>                </li>            </ul>        </nav>    </div></body> </html>                   
Output:  
Centered Navbar: The .justify-content-center class is used to set the alignment of navigation bar to center. The navigation bar is displayed center on medium, large and extra large screens. In the case of small screens, the navigation bar is displayed vertically and left-aligned.Example:  
html
<!DOCTYPE html><html lang="en"><head>    <title>Navigation Bar</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.3.1/css/bootstrap.min.css">         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head> <body style="text-align:center;">         <div class="container">                 <h1 style="color:green;">            GeeksforGeeks        </h1>                 <h2>Centered Navbar</h2>                 <nav class="navbar navbar-expand-sm bg-light justify-content-center">                         <ul class="navbar-nav">                <li class="nav-item">                    <a class="nav-link" href="#">Home</a>                </li>                             <li class="nav-item">                    <a class="nav-link" href="#">Algo</a>                </li>                             <li class="nav-item">                    <a class="nav-link" href="#">DS</a>                </li>                             <li class="nav-item">                    <a class="nav-link" href="#">Languages</a>                </li>            </ul>        </nav>    </div></body> </html>                   
Output:  
Colored Navbar: The .bg-color classes is used to change the background color of the navbar. The bg-color classes are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light. The .navbar-dark class is used to set links text color to white and .navbar-light class is used to set links text color to black.Example:  
html
<!DOCTYPE html><html lang="en"><head>    <title>Navigation Bar</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.3.1/css/bootstrap.min.css">         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head> <body>         <div class="container">                 <h1 style="color:green;text-align:center;">            GeeksforGeeks        </h1>                 <h2 style="text-align:center;">Colored Navbar</h2>                 <nav class="navbar navbar-expand-sm bg-primary navbar-dark">                         <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="#">Algo</a>                </li>                             <li class="nav-item">                    <a class="nav-link" href="#">DS</a>                </li>                             <li class="nav-item">                    <a class="nav-link" href="#">Languages</a>                </li>            </ul>        </nav>                     <br><br>                     <nav class="navbar navbar-expand-sm bg-success navbar-light">                         <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="#">Algo</a>                </li>                             <li class="nav-item">                    <a class="nav-link" href="#">DS</a>                </li>                             <li class="nav-item">                    <a class="nav-link" href="#">Languages</a>                </li>            </ul>        </nav>    </div></body> </html>                   
Output:  
Brand/Logo navbar: The .navbar-brand class is used to highlight the brand/logo name.Example:  
html
<!DOCTYPE html><html lang="en"><head>    <title>Navigation Bar</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.3.1/css/bootstrap.min.css">         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head> <body>         <div class="container">                 <h1 style="color:green;text-align:center;">            GeeksforGeeks        </h1>                 <h2 style="text-align:center;">Brand/Logo navbar</h2>                 <nav class="navbar navbar-expand-sm bg-primary navbar-dark">                         <a class="navbar-brand" href="#">GFG</a>               <ul class="navbar-nav">                <li class="nav-item">                    <a class="nav-link" href="#">Home</a>                </li>                             <li class="nav-item">                    <a class="nav-link" href="#">Algo</a>                </li>                             <li class="nav-item">                    <a class="nav-link" href="#">DS</a>                </li>                             <li class="nav-item">                    <a class="nav-link" href="#">Languages</a>                </li>            </ul>        </nav>                     <br><br>                     <nav class="navbar navbar-expand-sm bg-success navbar-light">                         <a class="navbar-brand" href="#">                <img src="https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png"                alt="logo" style="width:40px;">            </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="#">Algo</a>                </li>                             <li class="nav-item">                    <a class="nav-link" href="#">DS</a>                </li>                             <li class="nav-item">                    <a class="nav-link" href="#">Languages</a>                </li>            </ul>        </nav>    </div></body> </html>                   
Output:  
Collapsing Navbar: The collapsing navbar is used on small screens. It hides the navigation links and replaces with a button. The class=”navbar-toggler”, data-toggle=”collapse” and data-target=”#thetarget” is used to create collapse navigation bar. Example:  
html
<!DOCTYPE html><html lang="en"><head>    <title>Navigation Bar</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.3.1/css/bootstrap.min.css">         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head> <body>         <div class="container">                 <h1 style="color:green;text-align:center;">            GeeksforGeeks        </h1>                 <h2 style="text-align:center;">Collapsing Navbar</h2>                      <nav class="navbar navbar-expand-sm bg-success navbar-light">                         <!-- Brand/logo -->            <a class="navbar-brand" href="#">                <img src="https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png"                alt="logo" style="width:40px;">            </a>                         <button class="navbar-toggler" type="button" data-toggle="collapse"                        data-target="#collapse_Navbar">                <span class="navbar-toggler-icon"></span>            </button>                         <div class="collapse navbar-collapse" id="collapse_Navbar">                <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="#">Algo</a>                    </li>                                     <li class="nav-item">                        <a class="nav-link" href="#">DS</a>                    </li>                                     <li class="nav-item">                        <a class="nav-link" href="#">Languages</a>                    </li>                </ul>            </div>        </nav>    </div></body> </html>                   
Output: On large screen:  
On small screen:  
Dropdown Navbar: The navbar can be created by using dropdown menu. Example:  
html
<!DOCTYPE html><html lang="en"><head>    <title>Navigation Bar</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.3.1/css/bootstrap.min.css">         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head> <body>         <div class="container">                 <h1 style="color:green;text-align:center;">            GeeksforGeeks        </h1>                 <h2 style="text-align:center;">Dropdown Navbar</h2>                      <nav class="navbar navbar-expand-sm bg-success navbar-dark">                         <!-- Brand/logo -->            <a class="navbar-brand" href="#">                <img src="https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png"                alt="logo" style="width:40px;">            </a>                         <button class="navbar-toggler" type="button" data-toggle="collapse"                        data-target="#collapse_Navbar">                <span class="navbar-toggler-icon"></span>            </button>                         <div class="collapse navbar-collapse" id="collapse_Navbar">                <ul class="navbar-nav">                    <li class="nav-item">                        <a class="nav-link" href="#">Home</a>                    </li>                                     <li class="nav-item">                        <a class="nav-link" href="#">Algo</a>                    </li>                                     <li class="nav-item">                        <a class="nav-link" href="#">DS</a>                    </li>                                     <li class="nav-item dropdown">                        <a class="nav-link dropdown-toggle" href="#"                                id="navbardrop" data-toggle="dropdown">                            Languages                        </a>                                                 <div class="dropdown-menu">                            <a class="dropdown-item" href="#">Link 1</a>                            <a class="dropdown-item" href="#">Link 2</a>                            <a class="dropdown-item" href="#">Link 3</a>                        </div>                    </li>                </ul>            </div>        </nav>    </div></body> </html>                   
Output:  
Forms and Buttons Navbar: The <form class=”form-inline”> element is used to group inputs and button side-by-side. The .input-group-prepend or .input-group-append class is used to attach icon of input text fields.Example 1:  
html
<!DOCTYPE html><html lang="en"><head>    <title>Navigation Bar</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.3.1/css/bootstrap.min.css">         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head> <body>         <div class="container">                 <h1 style="color:green;text-align:center;">            GeeksforGeeks        </h1>                 <h2 style="text-align:center;">Forms and Buttons Navbar</h2>                      <nav class="navbar navbar-expand-sm bg-success navbar-dark">                         <!-- Brand/logo -->            <a class="navbar-brand" href="#">                <img src="https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png"                alt="logo" style="width:40px;">            </a>                         <button class="navbar-toggler" type="button" data-toggle="collapse"                        data-target="#collapse_Navbar">                <span class="navbar-toggler-icon"></span>            </button>                         <div class="collapse navbar-collapse" id="collapse_Navbar">                <ul class="navbar-nav">                    <li class="nav-item">                        <a class="nav-link" href="#">Home</a>                    </li>                                     <li class="nav-item">                        <a class="nav-link" href="#">Algo</a>                    </li>                                     <li class="nav-item">                        <a class="nav-link" href="#">DS</a>                    </li>                </ul>            </div>                         <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>    </div></body> </html>                   
Output:  
Example 2:  
html
<!DOCTYPE html><html lang="en"><head>    <title>Navigation Bar</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.3.1/css/bootstrap.min.css">         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head> <body>         <div class="container">                 <h1 style="color:green;text-align:center;">            GeeksforGeeks        </h1>                 <h2 style="text-align:center;">Forms and Buttons Navbar</h2>                      <nav class="navbar navbar-expand-sm bg-success navbar-dark">                         <!-- Brand/logo -->            <a class="navbar-brand" href="#">                <img src="https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png"                alt="logo" style="width:40px;">            </a>                         <button class="navbar-toggler" type="button" data-toggle="collapse"                        data-target="#collapse_Navbar">                <span class="navbar-toggler-icon"></span>            </button>                         <div class="collapse navbar-collapse" id="collapse_Navbar">                <ul class="navbar-nav">                    <li class="nav-item">                        <a class="nav-link" href="#">Home</a>                    </li>                                     <li class="nav-item">                        <a class="nav-link" href="#">Algo</a>                    </li>                                     <li class="nav-item">                        <a class="nav-link" href="#">DS</a>                    </li>                </ul>            </div>                         <form class="form-inline" action="#">                <div class="input-group">                    <div class="input-group-prepend">                        <span class="input-group-text">@</span>                    </div>                                         <input type="text" class="form-control"                            placeholder="Username">            </form>        </nav>    </div></body> </html>                   
Output:  
Text Navbar: The .navbar-text class is used to add the text element to the navigation bar.Example:  
html
<!DOCTYPE html><html lang="en"><head>    <title>Navigation Bar</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.3.1/css/bootstrap.min.css">         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head> <body>         <div class="container">                 <h1 style="color:green;text-align:center;">            GeeksforGeeks        </h1>                 <h2 style="text-align:center;">Text Navbar</h2>                      <nav class="navbar navbar-expand-sm bg-success navbar-dark">             <ul class="navbar-nav">                <li class="nav-item">                    <a class="nav-link" href="#">Home</a>                </li>                                 <li class="nav-item">                    <a class="nav-link" href="#">Algo</a>                </li>                                 <span class="navbar-text">                    DS                </span>            </ul>        </nav>    </div></body> </html>                   
Output:  
Fixed Navbar: The .fixed-top class is used to fix the navigation bar at the top position and the .fixed-bottom class is used to fix the navigation bar at the bottom position.Example 1:  
html
<!DOCTYPE html><html lang="en"><head>    <title>Navigation Bar</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.3.1/css/bootstrap.min.css">         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head> <body style="height:1000px">     <nav class="navbar navbar-expand-sm bg-success navbar-dark fixed-top">         <ul class="navbar-nav">            <li class="nav-item">                <a class="nav-link" href="#">Home</a>            </li>                             <li class="nav-item">                <a class="nav-link" href="#">Algo</a>            </li>                             <li class="nav-item">                <a class="nav-link" href="#">DS</a>            </li>                             <li class="nav-item">                <a class="nav-link" href="#">Languages</a>            </li>        </ul>    </nav>             <div class="container-fluid" style="margin-top:80px">                 <h1 style="color:green;text-align:center;">            GeeksforGeeks        </h1>                 <h2 style="text-align:center;">Fixed Top Navbar</h2>    </div></body> </html>                   
Output:  
Example 2:  
html
<!DOCTYPE html><html lang="en"><head>    <title>Navigation Bar</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.3.1/css/bootstrap.min.css">         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head> <body style="height:1000px">    <nav class="navbar navbar-expand-sm bg-success navbar-dark fixed-bottom">         <ul class="navbar-nav">            <li class="nav-item">                <a class="nav-link" href="#">Home</a>            </li>                             <li class="nav-item">                <a class="nav-link" href="#">Algo</a>            </li>                             <li class="nav-item">                <a class="nav-link" href="#">DS</a>            </li>                             <li class="nav-item">                <a class="nav-link" href="#">Languages</a>            </li>        </ul>    </nav>             <div class="container-fluid" style="margin-top:80px">                 <h1 style="color:green;text-align:center;">            GeeksforGeeks        </h1>                 <h2 style="text-align:center;">Fixed Bottom Navbar</h2>    </div></body> </html>                   
Output: 
Sticky Navbar: The .sticky-top class is used to create the sticky navbar. The sticky navbar stays fixed at the top of the page when scrolling the page.Example:  
html
<!DOCTYPE html><html lang="en"><head>    <title>Navigation Bar</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.3.1/css/bootstrap.min.css">         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head> <body style="height:1000px">         <div class="container-fluid">                 <h1 style="color:green;text-align:center;">            GeeksforGeeks        </h1>                 <h2 style="text-align:center;">Sticky Navbar</h2>    </div>         <nav class="navbar navbar-expand-sm bg-success navbar-dark sticky-top">         <ul class="navbar-nav">            <li class="nav-item">                <a class="nav-link" href="#">Home</a>            </li>                             <li class="nav-item">                <a class="nav-link" href="#">Algo</a>            </li>                             <li class="nav-item">                <a class="nav-link" href="#">DS</a>            </li>                             <li class="nav-item">                <a class="nav-link" href="#">Languages</a>            </li>        </ul>    </nav>             <div class="container-fluid" style="margin-top:80px">                 <h1 style="color:green;text-align:center;">            GeeksforGeeks        </h1>                 <div style="text-align:center;">            A computer science portal for geeks        </div>    </div></body> </html>                   
Output:  
Supported Browser:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
ysachin2314
Bootstrap-4
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to change navigation bar color in Bootstrap ?
How to Show Images on Click using HTML ?
How to align button to right side of text box in Bootstrap?
How to pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?
Express.js express.Router() Function
Installation of Node.js on Linux
How to use <mat-chip-list> and <mat-chip> in Angular Material ?
Top 10 Angular Libraries For Web Developers
Top 10 Projects For Beginners To Practice HTML and CSS Skills