Navbar in Bootstrap 5

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:

Editor

Loading...

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:

Editor

Loading...

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:

Editor

Loading...

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>
          <!-- Rest of the navbar content -->
     </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>
          <!-- Rest of the navbar content -->
     </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:

Editor

Loading...

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

Editor

Loading...

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:

Editor

Loading...

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:

Editor

Loading...

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.