Bootstrap Navbar
Bootstrap Navbar provides attractive headers to the website pages. It is used for styling the website's name and navigating the drop-down menus. Navbar is generally placed at the top of the web page. These are responsive in nature. Before creating a navbar there are some important points to know.
Getting started with the navbar
- To create, add .navbar, .navbar-default with navbar class. For responsive sites add .navbar-expand-{xs,sm,md,lg,xl} along with .navbar depending on screen size.
- Add a header .navbar-header with <div> class.
- Add a .navbar-brand with <a> tag
- For list of menus add .navbar or nav navbar-nav in <ul> tag.
Example: Creating bootstrap navbar
Here is a basic example of how to create a navbar and how it works.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Navbar</title>
<meta charset="utf-8">
<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>
<nav class="navbar navbar-expand-lg navbar-light bg-light>
<div class ="container-fluid">
<div class=" navbar navbar-header">
<a class="navbar-brand" href="#">studytonight</a>
</div>
<ul class ="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Tests</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
</nav>
</body>
</html>
Output:
In the above example, A light theme background is used. we can set the background as per our requirement.
Bootstrap Navbar Supported Classes
We can use these claases to make navbar as per the requirement.
- .navbar -brand - It is used for naming the website
- .navbar-nav - Used for full height and smooth navigation. It also supports drop-down menus.
- .navbar-toggler - It is used with collapse plugins and for other navigation toggling behaviors.
- .form-inline - It is used for form controls and action.
- .navbar-text - It is used for adding vertical centered text.
- .collapse.navbar-collapse - It is used for grouping and hiding navbar contents by a parent breakpoint.
Dropdown in the navbar:
To create a dropdown in the navbar, we can use the .dropdown class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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>
<nav class="navbar navbar-expand-lg navbar-dark primary-color>
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Studytonight</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Study Material</a></li>
<li><a href="#">Courser</a></li>
<li><a href="#">Career</a></li>
</ul>
</li>
<li><a href="#"></a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</nav>
</body>
</html>
Output:
Here is the output demonstrating dropdown in the navbar.
Buttons in Bootstrap Navbar
Navbar allows to add button, so we can add buttons in the navbar by using <button> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Navbar</title>
<meta charset="utf-8">
<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://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" </script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" </script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark primary-color>
<div class ="container-fluid">
<div class=" navbar navbar-header">
<a class="navbar-brand" href="#">studytonight</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Tests</a></li>
<li><a href="#">About us</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
</body>
</html>
Output
Here is the output demonstrating buttons in the navbar.
Forms in Bootstrap Navbar
We have seen that every website has a search box for searching. This search box is created using forms in the navbar. To add form in navbar .navbar-form class is used. let us demonstrate how forms are created. Let's see an example.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Navbar</title>
<meta charset="utf-8">
<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://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" </script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" </script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark primary-color">
<div class ="container-fluid">
<div class=" navbar navbar-header">
<a class="navbar-brand" href="#">studytonight</a>
</div>
<ul class ="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Tests</a></li>
<li><a href="#">About us</a></li>
</ul>
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" name="search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
</body>
</html>
Output:
Here is the output showing form in the navbar.
Example: Text in Bootstrap Navbar
To add text to the navbar, bootstrap provides .navbar-text class. We can write text in the navbar using .navbar-text.
<title> Bootstrap Navbar</title>
<meta charset="utf-8">
<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://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" </script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" </script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark primary-color>
<div class ="container-fluid">
<div class=" navbar navbar-header">
<a class="navbar-brand" href="#">studytonight</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Tests</a></li>
<li><a href="#">About us</a></li>
</ul>
<span class="navbar-text white-text">
We can add text in navbar
</span>
</div>
</nav>
</body>
</html>
Output:
Here is the output demonstrating how to add text in the navbar.
Conclusion
Here we have learned how we can add a navbar to a web page and experiment with it to modify the header of the web page.
