bootstrap
  1. bootstrap-navbar
PreviousNext

Bootstrap Navbar

  • A Bootstrap Navbar is a responsive navigation bar that can be used to display links to pages or sections of a website.
  • It is mobile-first and adjusts its layout to fit the screen size of the device being used.

Syntax

To create a Bootstrap Navbar, you need to add the following code to your HTML file:

<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" 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="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Example

Here is an example of a basic Bootstrap Navbar

<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <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="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                        aria-expanded="false">
                        Dropdown
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
                </li>
            </ul>
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>
Try Playground

Explanation

In the code above, we used the following classes to create the navbar:

  • navbar: this is the main class that indicates that this is a navbar.
  • navbar-expand-lg: this class tells Bootstrap to expand the navbar on larger screens.
  • navbar-light bg-light: this sets the color of the navbar to light gray.
  • navbar-brand: this is a class applied to the logo or brand name of the website.
  • navbar-toggler: this is a button that toggles the display of the navbar links on smaller screens.
  • collapse navbar-collapse: this is a container for the navbar links.
  • navbar-nav: this class contains a list of navbar links.
  • nav-item, nav-link: these classes are applied to each navbar link.
  • active: this class is used to highlight the current page in the navbar.

Use

Bootstrap Navbar is a great way to display navigation links on your website. It can be customized to suit your needs with different colors, effects, and styles. You can use it for various purposes such as:

  • Displaying links to pages or sections of your website.
  • Creating dropdown menus with submenus.
  • Displaying search forms, login forms, or social media icons.
  • Collapsing the navbar for smaller screens using the navbar-toggler button.

Important Points

  • Bootstrap Navbar is a responsive navigation bar that adjusts to the screen size of the device being used.
  • It can be customized with different colors, effects, and styles.
  • It can be used to display links to pages, submenus, search forms, login forms, and social media icons.
  • It is collapsed on smaller screens using the navbar-toggler button.

Summary

Bootstrap Navbar is an essential component of any website since it allows users to easily find the content they are looking for. It is easy to use and highly flexible, allowing you to create a navigation bar that matches your website's style and design.

List groupNavs and tabs
Published on: