Search box with icon in Navbar in bootstrap 4

Raja
Posted by Raja under Bootstrap category on | Points: 40 | Views : 829
Here is the code snippet that display the search box with icon at the top-right side of the navbar.

When navbar is collapsed in the small screen, search box goes inside the navbar.


<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">BrandName</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Tutorials">Tutorials</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>

<form action="/People/Search" method="Post" class="form-inline my-2 my-lg-0">
<div class="input-group">
<input type="text" name="keyword" class="form-control" placeholder="Keyword to seach">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">
<i class="fa fa-search">Go</i>
</button>
</div>
</div>
</form>


</div>
</div>
</nav>

Comments or Responses

Login to post response