Bootstrap 5 Search Bar
A search bar is a focused input pattern that combines a text field with a submit trigger, optionally augmented by filters or autocomplete affordances. It is composed from Bootstrap 5.3 primitives: `.input-group`, `.form-control`, `.btn`, and flex or grid utilities for layout. Use it whenever you need a prominent, accessible search entry point — from a global site header to an in-page data filter.
Primary Class
.input-groupCommon Use Cases
- →A SaaS dashboard requires a full-width search bar at the top of a data table so users can filter thousands of invoice records by keyword without leaving the page.
- →An e-commerce category page needs a search bar with a category dropdown prepended so shoppers can scope their query to Clothing, Electronics or Home before submitting.
- →A documentation site places a compact inline search bar in the sticky navbar, expanding to full width on focus so it does not crowd navigation links at rest.
- →A landing page hero section features a large centred search bar with a location input and a call-to-action button so visitors can find local service providers immediately on arrival.
Variants & Classes
| Variant | Description |
|---|---|
| Basic Inline | A single text input paired with a Search button inside an input group. Suitable for navbars and compact toolbars where horizontal space is limited. |
| With Prepended Dropdown | A category or scope selector is prepended to the text field using .input-group and a .form-select, letting users narrow the search domain before typing. |
| Hero / Full-width | A large, centred search bar spanning most of the viewport width, typically placed inside a jumbotron-style section using .container and .row justify-content-center. |
| Expanding Search (Focus) | A compact icon-button that expands into a full text field on focus, built with a CSS transition on max-width and Bootstrap's .form-control and .btn utilities. |
Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 5 Search Bar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
/* Expanding search bar */
.search-expand .form-control {
max-width: 2.5rem;
transition: max-width 0.35s ease;
overflow: hidden;
cursor: pointer;
}
.search-expand .form-control:focus {
max-width: 20rem;
cursor: text;
}
</style>
</head>
<body class="p-4 bg-light">
<h5 class="mb-3">1. Basic Inline Search Bar</h5>
<form role="search" class="mb-4">
<div class="input-group" style="max-width:480px">
<input
type="search"
class="form-control"
placeholder="Search…"
aria-label="Search"
aria-describedby="btn-search-basic">
<button class="btn btn-primary" type="submit" id="btn-search-basic">
<i class="bi bi-search" aria-hidden="true"></i>
<span class="ms-1">Search</span>
</button>
</div>
</form>
<h5 class="mb-3">2. Search Bar with Category Dropdown</h5>
<form role="search" class="mb-4">
<div class="input-group input-group-lg" style="max-width:640px">
<label class="visually-hidden" for="search-category">Category</label>
<select class="form-select flex-grow-0 w-auto" id="search-category" aria-label="Search category">
<option value="all" selected>All</option>
<option value="clothing">Clothing</option>
<option value="electronics">Electronics</option>
<option value="home">Home</option>
</select>
<input
type="search"
class="form-control"
placeholder="Search products…"
aria-label="Search products">
<button class="btn btn-primary" type="submit">
<i class="bi bi-search" aria-hidden="true"></i>
<span class="visually-hidden">Search</span>
</button>
</div>
</form>
<h5 class="mb-3">3. Hero Full-width Search Bar</h5>
<section class="bg-primary bg-gradient text-white rounded-3 p-5 mb-4">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-8">
<h2 class="text-center mb-4">Find Local Services</h2>
<form role="search">
<div class="input-group input-group-lg shadow">
<span class="input-group-text bg-white border-end-0">
<i class="bi bi-geo-alt text-muted" aria-hidden="true"></i>
</span>
<input
type="text"
class="form-control border-start-0 border-end-0"
placeholder="Postcode or town…"
aria-label="Location">
<input
type="search"
class="form-control border-start-0"
placeholder="What are you looking for?"
aria-label="Search term">
<button class="btn btn-warning fw-semibold" type="submit">Search</button>
</div>
</form>
</div>
</div>
</div>
</section>
<h5 class="mb-3">4. Expanding Search Bar</h5>
<nav class="navbar bg-dark rounded-3 px-3 mb-4">
<a class="navbar-brand text-white" href="#">Docs</a>
<form role="search" class="search-expand ms-auto">
<div class="input-group">
<input
type="search"
class="form-control form-control-sm bg-dark text-white border-secondary"
placeholder="Search docs…"
aria-label="Search documentation">
<span class="input-group-text bg-dark border-secondary text-white">
<i class="bi bi-search" aria-hidden="true"></i>
</span>
</div>
</form>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Live Examples
Navbar Inline Search
A compact search bar suitable for embedding inside a Bootstrap navbar. Uses .input-group at small size and a visually hidden label for screen-reader accessibility.
Data Table Filter Search
A full-width search bar positioned above a data table. Pairs a search input with a status filter and a Reset button — all within a card header for visual grouping.
Hero Search with Autocomplete Hint
A large centred search bar for a landing page, styled with a shadow and a helper text line beneath to guide users. No custom classes are required beyond Bootstrap utilities.
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Inline navbar search bar with icon button, generated from prompt
- ✓Full-width hero search bar with location and keyword inputs
- ✓Data table filter bar with dropdown and reset button
- ✓Dark-themed expanding search bar for documentation sites
- ✓Multi-field search bar with date range and category selector
Best Practices
Always use type="search" and role="search"
Setting type="search" activates native browser clear buttons and pronunciation hints for screen readers. Wrapping the control in a <form role="search"> element further signals the landmark to assistive technology, satisfying WCAG 2.1 guideline 1.3.1 without any extra ARIA.
Pair every input with a visible or visually-hidden label
Bootstrap's .visually-hidden utility keeps the label in the accessibility tree without affecting visual layout. Avoid relying on placeholder text alone — placeholders disappear on focus and are not reliably announced by all screen readers, which makes the field ambiguous for keyboard-only users.
Use .input-group-text for decorative icons, not <button>
Icons that have no interactive function (such as a static magnifying glass that does not submit) belong in a .input-group-text span, not a button. Reserve <button> for actual submit or clear actions and give each button a descriptive aria-label or visually-hidden text so its purpose is unambiguous to screen readers.
Constrain width with max-width rather than grid columns alone
Applying a max-width inline style or a utility such as .w-75 directly on the .input-group prevents the search bar from becoming uncomfortably wide on large viewports. Coupling this with .mx-auto centres it without needing to reach for a full .row / .col wrapper, keeping the markup lighter.