Navbar search
Bootstrap 5 Navbar search component
Responsive Navbar search built with Bootstrap 5. Examples of navigation bar searches include arranging the search element or adapting to a dark theme.
Basic example
Place search element within a navbar:
<nav class="navbar navbar-light bg-body-tertiary">
<div class="container-fluid">
<form class="d-flex input-group w-auto">
<input
type="search"
class="form-control rounded"
placeholder="Search"
aria-label="Search"
aria-describedby="search-addon"
/>
<span class="input-group-text border-0" id="search-addon">
<i class="fas fa-search"></i>
</span>
</form>
</div>
</nav>
Immediate child elements of .navbar use flex layout and will default to
justify-content: space-between. Use additional
flex utilities
as needed to adjust this behavior.
<nav class="navbar navbar-light bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex input-group w-auto">
<input
type="search"
class="form-control rounded"
placeholder="Search"
aria-label="Search"
aria-describedby="search-addon"
/>
<span class="input-group-text border-0" id="search-addon">
<i class="fas fa-search"></i>
</span>
</form>
</div>
</nav>
White form for the dark theme.
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<form class="d-flex input-group w-auto">
<input
type="search"
class="form-control rounded"
placeholder="Search"
aria-label="Search"
aria-describedby="search-addon"
/>
<span class="input-group-text text-white border-0" id="search-addon">
<i class="fas fa-search"></i>
</span>
</form>
</div>
</nav>