In today’s tutorial, we will see how to use search box in bootstrap 5. For this section we will see search input form, search bar. search input with left side icon, search input with floating states and single border. We will use search icon font awesome 6.
Bootstrap 5 Search Box Example
1. Bootstrap 5 simple search box form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap 5 Search Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="d-flex align-items-center justify-content-center vh-100 flex-column gap-4">
<form class="d-flex">
<input class="form-control me-1" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-primary" type="submit">Search</button>
</form>
<form class="d-flex">
<input class="form-control me-1" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-primary" type="submit">Search</button>
</form>
<form class="d-flex">
<input class="form-control me-1" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</div>
</body>
</html>
2. Bootstrap 5 left side search box.
<form class="d-flex">
<button class="btn btn-primary me-1" type="submit">Search</button>
<input class="form-control" type="search" placeholder="Search" aria-label="Search">
</form>
<form class="d-flex">
<button class="btn btn-outline-primary me-1" type="submit">Search</button>
<input class="form-control" type="search" placeholder="Search" aria-label="Search">
</form>
<form class="d-flex">
<button class="btn btn-success me-1" type="submit">Search</button>
<input class="form-control" type="search" placeholder="Search" aria-label="Search">
</form>
3. Bootstrap 5 search form with fontawesome 6 icon.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap 5 Search box with Icon</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- fontawesome icon cdn -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.css">
</head>
<body>
<div class="d-flex align-items-center justify-content-center vh-100 flex-column gap-4">
<form class="d-flex">
<input class="form-control me-1" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-primary" type="submit">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</form>
<form class="d-flex">
<input class="form-control me-1" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-primary" type="submit">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</form>
<form class="d-flex">
<input class="form-control me-1" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-success" type="submit">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</form>
</div>
</body>
</html>
4. Bootstrap 5 border less search box.
<form class="d-flex">
<input class="border border-3 border-top-0 border-start-0 border-end-0" type="search" placeholder="Search"
aria-label="Search" style=" outline: none;">
<button class="btn btn-primary" type="submit">Search </button>
</form>
5. Bootstrap 5 floating search box.
<form action="">
<div class="form-floating mb-3 d-flex">
<input type="search" class="form-control form-control" id="floatingInput" placeholder="Search Query">
<label for="floatingInput">Search Query</label>
</div>
</form>
