Welcome to The Coding College! In this guide, we’ll explore how to use Bootstrap 4 Navigation Bars to create professional and responsive navigation menus for your website. The Navbar is one of the most crucial components in any website, and Bootstrap 4 makes it incredibly easy to build and customize.
What Is a Navigation Bar?
A Navigation Bar (Navbar) is a responsive, flexible component for guiding users across your website. With Bootstrap 4, you can create fixed, sticky, collapsible, or fully responsive navigation bars in just a few steps.
Basic Navigation Bar
The simplest way to create a navbar is to use the .navbar class.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Navbar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html> Explanation:
.navbar: Defines the navigation bar..navbar-light: Applies a light color scheme to the navbar..bg-light: Adds a light background color to the navbar.
Responsive Navigation Bar
Bootstrap 4 navigation bars are responsive by default. The .navbar-expand-{breakpoint} class allows the navbar to collapse on smaller screens.
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="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav> Explanation:
.navbar-expand-lg: The navbar expands onlg(large) screens and collapses on smaller screens..navbar-toggler: Creates a hamburger menu for small screens..collapse: Hides the navbar links when collapsed..navbar-collapse: Contains the collapsible content.
Fixed Navigation Bar
To create a navbar that stays at the top of the page, use the .fixed-top class.
Example:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Fixed Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav> Explanation:
.fixed-top: Ensures the navbar remains at the top of the viewport..navbar-dark: Applies a dark color scheme..bg-dark: Adds a dark background color to the navbar.
Sticky Navigation Bar
For a navbar that sticks to the top only when scrolling, use the .sticky-top class.
Example:
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
<a class="navbar-brand" href="#">Sticky Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSticky">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSticky">
<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="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav> Explanation:
.sticky-top: Keeps the navbar at the top only when scrolling down.
Adding Dropdown Menus
Bootstrap 4 makes it easy to include dropdown menus within your navbar.
Example:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Dropdown Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown">
Services
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Web Design</a>
<a class="dropdown-item" href="#">SEO</a>
<a class="dropdown-item" href="#">Marketing</a>
</div>
</li>
</ul>
</div>
</nav> Explanation:
.dropdown: Defines the dropdown menu..dropdown-toggle: Creates the dropdown toggle link..dropdown-menu: Contains the dropdown options.
Customizing Navbar Colors
You can change the color scheme of your navbar by using utility classes like .bg-primary or .bg-danger.
Example:
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Custom Navbar</a>
</nav> Explanation:
.bg-primary: Applies a primary background color..navbar-dark: Ensures text and links are readable on dark backgrounds.
Centered Brand or Links
To center the navbar brand or links, use utility classes like .mx-auto.
Example:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand mx-auto" href="#">Centered Brand</a>
</nav> Practical Example
Here’s a complete example of a responsive, collapsible navbar with dropdowns:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Navbar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown">
Services
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Design</a>
<a class="dropdown-item" href="#">Development</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html> Conclusion
Bootstrap 4 Navigation Bars provide a powerful, flexible way to design menus for websites. From basic layouts to advanced dropdowns and sticky bars, the possibilities are endless.