Bootstrap Navabr
Bootstrap provide a built-in responsive navigation bar with various customization options.
A navigation bar is a graphical user interface component that is used as a primary navigation tool in a website or application.
As an example:
In this example:
- The navbar consists of a logo, a toggle button that appears on smaller screens, and a collapsible menu with links to various pages.
- The navbar is styled with Bootstrap's built-in CSS classes, and it includes jQuery and Popper.js JavaScript libraries to enable the toggle button functionality.
Vertical Navbar
In Bootstrap 5, creating a vertical navbar is simple and can be achieved using the .flex-column class on the .navbar-nav element.
As an example:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-column" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</div>
</div>
</nav>
In this example:
- The
.flex-column class is added to the .navbar-nav element, which aligns the navigation links vertically. - The rest of the code is standard Bootstrap 5 navbar markup, with a toggle button for collapsed views and a responsive layout.
Centered Navbar
To create a centered navbar using Bootstrap 5, you can use the mx-auto class along with the justify-content-center class.
As an example:
In this example:
- The
mx-auto class is applied to both the navbar and navbar-nav elements to center the content horizontally. - The
navbar-expand class is used to expand the navbar to the full width of the viewport.
Colored Navbar
To create a colored navbar in Bootstrap 5, you can add a background color class to the nav element.
For example, to create a blue navbar, you can use the .bg-primary class.
As an example:
In this example:
- The
.bg-primary, .bg-warning and .bg-success classes is added to the nav element to set the background color . - You can use any of the Bootstrap color classes, such as
.bg-secondary, .bg-info .bg-danger, and so on, to set the color of the navbar.
Brand/Logo Navabr
The brand/logo is usually placed on the left side of the navbar. It is commonly used to display the name or logo of the website or application.
As an example:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">My Website</a>
</div>
</nav>
In the above example:
- The
.navbar-brand class is applied to the anchor tag (<a>) containing the brand name "My Website". - The
.navbar-expand-lg class is used to make the navbar expandable on larger screens.
You can also add an image as the brand/logo.
As an example:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="logo.png" alt="My Logo" />
</a>
</div>
</nav>
In the above example:
- An image with the source
"logo.png" and the alternative text "My Logo" is used as the brand/logo. - The image is wrapped in the
.navbar-brand class to position it correctly in the navbar.
Navbar Text
To add Navbar Text in Bootstrap 5, you can use the .navbar-text class.
As an example:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">My Website</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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>
<span class="navbar-text"> Sign In </span>
</div>
</div>
</nav>
In this example:
- The Navbar Text
"Sign In" is added using the .navbar-text class. - It is positioned to the right of the Navbar using the
me-auto class on the <ul> element.
You can further style the Navbar Text by adding additional Bootstrap text and color classes.
As an example:
<span class="navbar-text text-danger fw-bold"> Sign In </span>
In this example:
- The Navbar Text is styled with the
text-danger class to make it red, and the fw-bold class to make it bold.
Navbar With Dropdown
You can use the dropdown class with the nav-item class in the ul element of the Navbar.
As an example:
In the above example:
The dropdown class is added to the li element with the nav-item class.
The nav-link class is added to the a element to style it as a Navbar link.
The dropdown-toggle class is added to the same a element to make it clickable and reveal the Dropdown menu.
The Dropdown menu is created using a nested ul element with the dropdown-menu class.
The dropdown-item class is added to the a elements inside the Dropdown menu to style them as menu items.
Navabr with search
In this example:
- The navbar has the same basic structure with a container, a
navbar-brand, a navbar-toggler, and a collapsible navbar-nav. - The
navbar-nav is aligned to the left using the me-auto class, leaving space for the search form on the right. - The search form is contained within a
<form> element with the class d-flex, which makes the form elements display as a flexbox. - The search input has the class
form-control to give it Bootstrap styling. - The search button has the class
btn btn-outline-success to give it Bootstrap styling and a green outline.
Fixed Navigation Bar
To create a fixed navigation bar in Bootstrap, you can use the fixed-top class along with the navbar class.
As an example:
In this example:
- The
fixed-top class is applied to the navbar element to make it fixed at the top of the viewport. - Some additional CSS is added to create some space at the top of the page to demonstrate the fixed navbar.
Sticky Navbar
For create a sticky navbar in Bootstrap, you can use the sticky-top class along with the navbar class.
As an example:
In this example:
- The
sticky-top class is applied to the navbar element to make it sticky as the user scrolls down the page. - Some additional CSS is added to create some height to the page to demonstrate the sticky navbar.