The key to adding a search form in the Bootstrap navigation bar is to have clear structure and correct use of class names. 1. Use d-flex to arrange form elements horizontally, and form-control and btn classes are used for input boxes and buttons respectively; 2. Use ms-auto or me-auto to control form alignment to achieve left or right layout; 3. Use w-100 and flex-grow-1 to optimize mobile display to avoid layout confusion; 4. Select the search box position according to the scene. Common practices include placing it on the right, in the middle of navigation, or in the collapsed menu; 5. If complex interactions are automatically completed, additional JS is required. By reasonably combining the Bootstrap classes, responsive search boxes can be implemented without complex code.

It is not difficult to add a search form to the Bootstrap navigation bar. The key is to have clear structure and coordinated styles. As long as you use the class names provided by Bootstrap reasonably, the search box can be naturally embedded in the navigation bar while maintaining a responsive layout.

Basic structure: use form-inline and input-group

Bootstrap's navigation bar is arranged horizontally by default, suitable for placing elements such as links and buttons. To add a search box, you usually use the <form></form> tag and use form-inline class to keep the elements displayed in a row.

 <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="#navbarContent">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarContent">
      <form class="d-flex ms-auto">
        <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>

• d-flex allows the internal elements of the form to be arranged horizontally
• ms-auto allows the form to be aligned to the right (depending on the requirement)
• me-2 sets a little space between the input box and the button
• btn-outline-success is a visual style choice that can be replaced according to the project style

Place it on the right or left? Decide based on usage scenario

The location of the search box will affect the user experience, and there are usually several common practices:

• Placed on the right side of the navigation bar : Most common, it conforms to the user's browsing habits from left to right, suitable for most websites
• Placed in the middle of the navigation link : suitable for websites with search as the core function (such as e-commerce, content platforms)
• In the folding menu : suitable for mobile, saving space

If you want the search box to always be right, you can write it like this:

 <div class="collapse navbar-collapse" id="navbarContent">
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">About</a></li>
  </ul>
  <form class="d-flex">
    <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>

• me-auto is to give space between navigation links and search boxes
• mb-2 mb-lg-0 is to make the mobile menu look cleaner

Mobile optimization: Avoid layout incorrectly

On a small screen, if the search box is too wide, it may cause a misplaced layout. It can be optimized by setting the maximum width or using responsive classes.

 <form class="d-flex w-100">
  <input class="form-control me-2 flex-grow-1" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>

• w-100 ensures that the form fills the container
• flex-grow-1 allows the input box to automatically expand the width
• If you want the button to become an icon button on the mobile side, you can add a media query or use Bootstrap's responsive tool class

Basically that's it

The core of adding a search box is the correct use of structure and class names. No complex JS is required, nor does it require additional styles. As long as you make rational use of Bootstrap's built-in classes, you can quickly implement a beautiful and practical search box. Of course, if there are more complex interaction requirements (such as automatic completion, pull-down results, etc.), then additional JS logic is required.

The above is the detailed content of How to add a search form inside a Bootstrap navbar?. For more information, please follow other related articles on the PHP Chinese website!