PUBLISHED ON: AUGUST 7, 2021
How to add search field within the navbar?
The Bootstrap navbar is generally placed at the top of the webpage. The navbar helps in the navigation between the web pages. There are various components that can be added to the navbar. One among them is the search field that is used to find the search according to the query entered in the field. So let's see how we can add a search field to the navbar.
Adding search field to the navbar using Bootstrap 5
The search field is added using form controls. The search field is added with the buttons.
The form is wrapped under the .d-flex class to align <input> and <button> in the same line. The <input> is assigned with .form-control class with placeholder="search" , type="search" and aria-label="Search". The <button> is assigned with .btn class and type="button" attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>
<nav class="navbar navbar-light bg-dark">
<div class="container-fluid">
<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>
</nav>
</body>
</html>
Output
Here is the output of the above program.
Alignment of Search Field
The .navbar uses a flex layout to align the elements within it. The child element will be placed in the navbar using the justify-content: space-between by default. Let us take an example to illustrate this. Here, we have added the .navbar-brand along with the search field.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<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>
</nav>
</body>
</html>
Output
As you can see in the output that the .navbar-brand and search field are placed at either side of the navbar creating space between them.
Conclusion
We have learned to add a search field within the navbar using Bootstrap 5. The search field can be easily added using forms. The search field can be used to search contents within the website. So add the search field to your navigation to make it more attractive.
