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 oftype="search"misses semantic meaning but still works. - Placing the search form outside the
.navbar-collapsecan 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"withtype="search"andaria-label="Search". - Button: Use
class="btn btn-outline-success"andtype="submit". - Placement: Put the form inside
.navbar-collapsefor 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.