About Lesson
Navbar with Search Box & Buttons
- .form-control → Input field styling
- .btn → Button styling
Example: Navbar with Search Box
HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Output:

Explanation:
- d-flex aligns form elements horizontally.
- me-auto pushes the search box to the right.