Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create a navbar in Bootstrap ?

  • Difficulty Level : Basic
  • Last Updated : 06 Aug, 2021

Bootstrap Navbar is a navigation header that is located at the top of the webpage which can be extended or collapsed, depending on the screen size. Bootstrap Navbar is used to create responsive navigation for our website. 

We can create standard navigation bar with <nav class=”navbar navbar-default”>. We can also create different navbar variations such as navbars with drop-down menus and search boxes and a fixed navbar with minimal effort.  Below is the procedure to implement a simple static navbar with navigation links.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Step by Step Guide to implement Navbar in Bootstrap

Step 1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.



 

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>

Step 2: Add <nav> tag with .navbar and .navbar-default class in <body> tag.

<nav class="navbar navbar-default">
    <!-- Navbar content goes here -->
</nav>

Step 3: Add <div> tag with class container-fluid and also add another <div> with class .navbar-header to give name to header and add navigation list after closing <div> tag.

Note: The class .navbar-header is optional.

<div class="container-fluid">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">WebSiteName</a>
  </div>

  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</div>

We have successfully implemented Navbar in Bootstrap.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap NavBar Example</title>
    <meta charset="utf-8" />
    <!-- Include bootstrap, CSS and jQuery CDN -->
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <!-- Add <nav> tag with .navbar and
         .navbar-default class -->
    <nav class="navbar navbar-default">
  
        <!-- Add navbar content -->
        <div class="container-fluid">
  
            <!-- Include .navbar-header class 
                 in <div>  (optional)-->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    GeeksforGeeks
                </a>
            </div>
  
            <!-- Include navbar list -->
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">
                    Home
                </a></li>
                <li><a href="#">Page 1</a></li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
            </ul>
        </div>
    </nav>
  
    <!-- Sample page content -->
    <div class="container">
        <h3>Bootstrap Navbar Example</h3>
  
        <p>
            A navigation bar is a navigation 
            header placed at the top of the page.
        </p>
    </div>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :