The Bootstrap 4 Navbar is a responsive and customizable navigation bar used for creating headers, menus, and navigation links.
It supports branding, dropdowns, search bars, collapsible content, and alignment options.
What This Tutorial Covers:
- Basic Bootstrap 4 navbar structure
- Navbar colors and styles
- Responsive navbar (collapsible behavior)
- Navbar with brand/logo
- Navbar with dropdowns
- Navbar with search form
- Right-aligned navigation
- Sticky and fixed navbar
- Customizing the navbar with CSS
1. Basic Bootstrap 4 Navbar
To create a basic navbar, use the .navbar class along with .navbar-expand-* to control when the navbar collapses.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Navbar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<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</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Explanation:
- .navbar creates the navbar container.
- .navbar-expand-lg makes the navbar collapsible on smaller screens.
- .navbar-light bg-light applies a light background with dark text.
- .navbar-brand is used for the brand/logo.
- .navbar-toggler is the hamburger menu for small screens.
- .collapse navbar-collapse makes the menu collapsible.
2. Navbar Colors and Styles
Use different color schemes by changing navbar-light and navbar-dark along with a background color.
Example:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Dark Navbar</a>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
<a class="navbar-brand text-white" href="#">Primary Navbar</a>
</nav>
Available Background Colors:
| Class | Description |
|---|---|
| bg-light | Light background with dark text |
| bg-dark | Dark background with white text |
| bg-primary | Blue background |
| bg-success | Green background |
| bg-danger | Red background |
| bg-warning | Yellow background |
3. Responsive Navbar (Collapsible Behavior)
The .navbar-expand-* class controls when the navbar collapses.
Collapse Behavior:
| Class | Collapse At |
|---|---|
| .navbar-expand-sm | 576px (small devices) |
| .navbar-expand-md | 768px (medium devices) |
| .navbar-expand-lg | 992px (large devices) |
| .navbar-expand-xl | 1200px (extra-large devices) |
Example for a navbar that collapses on medium screens:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Brand</a>
</nav>
4. Navbar with Brand/Logo
You can add an image logo instead of text inside .navbar-brand.
Example:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="https://via.placeholder.com/40" width="40" height="40" class="d-inline-block align-top" alt="Logo">
Brand Name
</a>
</nav>
5. Navbar with Dropdowns
Dropdown menus inside a navbar require .dropdown, .dropdown-menu, and .dropdown-item.
Example:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else</a>
</div>
</li>
</ul>
</div>
</nav>
Explanation:
- .dropdown-toggle makes the menu toggleable.
- .dropdown-menu contains the menu items.
- .dropdown-item styles each link inside the dropdown.
6. Navbar with Search Form
You can add a search bar inside the navbar.
Example:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<div class="collapse navbar-collapse">
<form class="form-inline ml-auto">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
Explanation:
- .form-inline aligns the search form horizontally.
- .ml-auto pushes the form to the right.
7. Right-Aligned Navigation
Use .ml-auto to align the menu to the right.
Example:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Login</a></li>
<li class="nav-item"><a class="nav-link" href="#">Sign Up</a></li>
</ul>
</div>
</nav>
8. Sticky and Fixed Navbar
Sticky Navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
<a class="navbar-brand" href="#">Sticky Navbar</a>
</nav>
- .sticky-top keeps the navbar visible when scrolling.
Fixed Navbar:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Fixed Navbar</a>
</nav>
- .fixed-top makes the navbar always stay at the top.
9. Customizing Navbar with CSS
You can override Bootstrap styles with custom CSS.
Example:
<style>
.custom-navbar {
background-color: #ff5733;
}
</style>
<nav class="navbar navbar-expand-lg custom-navbar">
<a class="navbar-brand text-white" href="#">Custom Navbar</a>
</nav>
- The .custom-navbar class changes the background color.
