Course Content
Bootstrap 5 Alerts
0/1
Progress Bars
0/1
Spinners
0/1
Pagination
0/1
List Groups
0/1
Bootstrap 5 Scrollspy
0/1
Bootstrap
About Lesson

 Navbar with Search Box & Buttons

  • .form-control → Input field styling
  • .btn → Button styling

Example: Navbar with Search Box

HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Brand</a>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav me-auto">
        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Output:

Explanation:

  • d-flex aligns form elements horizontally.
  • me-auto pushes the search box to the right.