I am struggling to enhance the style and layout of multiple search filters on the page so that the User Experience is improved. I'm unsure how to effectively design this search component.
<section class="search-sec">
<div class="container">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<input class="" type="text" name="name" placeholder="Name" value="@ViewData["name"]" />
</div>
<div class="col-lg-2 col-md-2 col-sm-12 p-0">
<label for="age" class="">Age</label>
<select class="" name="age">
........
</div>
<div class="col-lg-3 col-md-3 col-sm-12 p-0">
<label for="minAge">Age range between</label>
<select name="minAge">
......
</select>
and
<select name="maxAge">
......
</select>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 p-0">
<label for="sex">Sex</label>
<select name="sex">
.....
</select>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 p-0">
<label for="stockNumber">Find by Stock Number</label>
<input type="text" name="stockNumber" value="@ViewData["stockNumber"]"
</div>
<div class="col-lg-3 col-md-3 col-sm-12 p-0">
<input type="submit" value="Search" class="btn btn-default" /> |
<a class="btn btn-link" asp-action="Index">Clear</a>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
Despite adjusting sizes, the issue remains and the search functionality appears like this
https://i.stack.imgur.com/bCPJm.png
I have searched for Bootstrap examples but haven't found a solution. Can someone provide suggestions on improving the appearance of this search feature? Any assistance would be much appreciated.