How to create a navbar in Bootstrap ?
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.
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=
"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>
</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:
