0
0
BootstrapHow-ToBeginner · 3 min read

How to Add Search in Navbar Bootstrap: Simple Guide

To add a search box in a Bootstrap navbar, include a <form> element with the class d-flex inside the navbar. Use an <input> with class form-control for the search field and a <button> with class btn btn-outline-success for the submit button.
📐

Syntax

The search form inside a Bootstrap navbar typically uses a <form> with class d-flex to align items horizontally. Inside the form, an <input> with class form-control creates the search box, and a <button> with class btn btn-outline-success styles the submit button.

  • <form class="d-flex">: Makes the form items line up side by side.
  • <input class="form-control" type="search" placeholder="Search" aria-label="Search">: The text box for typing the search query.
  • <button class="btn btn-outline-success" type="submit">: The button to submit the search.
html
<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>
Output
A horizontal search box with a text input and a button labeled 'Search'.
💻

Example

This example shows a complete Bootstrap navbar with a search form on the right side. The search box and button are aligned horizontally and styled with Bootstrap classes.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Navbar with Search</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Brand</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>
        </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>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Output
A responsive navbar with brand name, navigation links on the left, and a search box with a button on the right.
⚠️

Common Pitfalls

  • Forgetting to add class="d-flex" to the <form> causes the input and button to stack vertically instead of side by side.
  • Not including aria-label="Search" on the input reduces accessibility for screen readers.
  • Using type="text" instead of type="search" misses semantic meaning but still works.
  • Placing the search form outside the .navbar-collapse can break responsive behavior.
html
<!-- Wrong: missing d-flex -->
<form role="search">
  <input class="form-control me-2" type="search" placeholder="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>

<!-- Right: with d-flex -->
<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>
📊

Quick Reference

  • Form container: Use class="d-flex" for horizontal layout.
  • Input field: Use class="form-control me-2" with type="search" and aria-label="Search".
  • Button: Use class="btn btn-outline-success" and type="submit".
  • Placement: Put the form inside .navbar-collapse for responsive toggling.

Key Takeaways

Add a form with class d-flex inside the navbar for horizontal search layout.
Use input with class form-control and type="search" for the search box.
Include an accessible aria-label="Search" on the input for screen readers.
Place the search form inside the .navbar-collapse for proper responsive behavior.
Use Bootstrap button classes like btn btn-outline-success for a styled submit button.