Bootstrap 5 search forms are used in headers, hero sections and filter interfaces. This page covers 4 search patterns — basic, filter dropdown, hero search and autocomplete suggestions — each ready to use.

Quick Setup

Search forms need only Bootstrap 5 CSS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Key Classes Reference

ClassWhat It Does
type="search"HTML5 search input with clear button
.input-groupGroups input with button/icon
.form-controlStyles the search input
placeholderHint text inside input
autocomplete="off"Disables browser autocomplete
.dropdown-menuSuggestions dropdown

1. Basic Bootstrap 5 Search Bar

A clean search input with button using input-group. Works in navbars, headers and content areas.

2. Bootstrap 5 Search with Filter Dropdown

Search bar with a category filter dropdown. Common on e-commerce and documentation sites.

3. Bootstrap 5 Full Width Hero Search

A prominent search bar for hero sections. Common on job boards, real estate and documentation sites.

4. Bootstrap 5 Search with Suggestions

Search input that shows suggestion dropdown as user types. Built with Bootstrap dropdown.

Frequently Asked Questions

Add a clear button inside an input group and clear the value on click: <button onclick='document.getElementById("search").value=""' class='btn btn-outline-secondary'>✕</button>. Or use the native browser clear button by setting type='search' — browsers show an X icon when the input has a value.
Listen for the keyboard event: document.addEventListener('keydown', e => { if((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); document.getElementById('searchInput').focus(); } }). Show the shortcut hint inside an input-group-text span: <kbd>⌘K</kbd>.
Listen to the input event and filter DOM elements: input.addEventListener('input', function() { items.forEach(item => { item.style.display = item.textContent.toLowerCase().includes(this.value.toLowerCase()) ? '' : 'none'; }); }). No library needed for simple filtering.
Override the placeholder CSS: .form-control::placeholder { color: #aaa; font-style: italic; }. You can also change placeholder opacity on focus: .form-control:focus::placeholder { opacity: 0.5; }.
Position a div with border shadow bg-white below the input using position absolute. Toggle its display on input event. Use fetch to call an API and populate results dynamically. Close the dropdown when clicking outside using a document click listener.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →

Use code FIRST30 for 30% off your first purchase.

Related Components

Bootstrap 5 Input Group

View examples →

Bootstrap 5 Navbar Example

View examples →

Bootstrap 5 Form Validation

View examples →