Bootstrap Navigation Bar
Menu
Bootstrap Navigation Bar
Bootstrap Navigation Bar, also known as Navbar, is a popular component in the Bootstrap front-end framework that provides a responsive and flexible way to create a navigation menu for your website or web application.
Here is an example of how to create a basic Bootstrap Navigation Bar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<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="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
In this example, we have used the following classes to create a basic Navigation Bar:
- navbar: This is the main container for the Navigation Bar.
- navbar-expand-lg: This makes the Navigation Bar expand when the screen size is larger than or equal to “lg” (992px).
- navbar-light bg-light: This sets the background color of the Navigation Bar to light gray.
- navbar-brand: This is the logo or name of your website or web application.
- navbar-toggler: This is the button that toggles the Navigation Bar on small screens.
- collapse navbar-collapse: This is the container for the Navigation Bar links.
- navbar-nav: This is the container for the Navigation Bar links.
- nav-item: This is a container for a single Navigation Bar link.
- nav-link: This is the style for the Navigation Bar link.
- active: This is used to indicate the current active link.
This basic Navigation Bar will be responsive and automatically collapse on smaller screens, with a toggle button to expand it. You can customize the Navigation Bar further by using additional Bootstrap classes, such as fixed-top to make it stick to the top of the page, or adding dropdown menus to the links.
Menu
Join To Get Our Newsletter