I have few search filters on my page and a data card ASP.Net Core application. I am trying to align them on the page so it looks better. Currently it looks like below
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="card border-info mb-3" style="max-width: 12rem;">
<div class="card-header text-center"><b>Current Shipping Address</b></div>
<div class="card-body text-info" style="font-size: 14px;">
<b><h7 class="card-title">Location</h7></b>
<p class="card-text">
@Html.DisplayFor(model => model.CustomerData.Location)
<br />@Html.DisplayFor(model => model.CustomerData.Address1)
</p>
</div>
</div>
</div>
<div class="col-md-9">
<section class="search-sec">
<div class="container-fluid">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-lg-9">
<div class="row">
<div class="col-lg-5 col-md-2 col-sm-12 p-0">
<label for="name" class="">Strain Name</label>
<input class="" type="text" name="name" value="@ViewData["name"]" />
</div>
<div class="col-lg-4 col-md-2 col-sm-12 p-0">
<label for="genotype" class="">Genotype</label>
<input class="" type="text" name="genotype" value="@ViewData["genotype"]" />
</div>
</div>
<div class="form-row">
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<label for="age" class="">Age</label>
<select class="" name="age">
......
</select>
</div>
<div class="col-lg-6 col-md-2 col-sm-12 p-0">
<label for="minAge">Age range between</label>
<select name="minAge">
.......
</select>
and
<select name="maxAge">
........
</select>
</div>
</div>
<div class="form-row">
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<label for="sex">Sex</label>
<select name="sex">
......
</select>
</div>
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<div class="form-group form-actions col-md-10 no-color">
<label for="stockNumber">Find by Stock Number</label>
<input type="text" name="stockNumber" value="@ViewData["stockNumber"]" />
</div>
</div>
</div>
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<input type="submit" value="Search" class="btn btn-default" /> |
<a class="btn btn-link" asp-action="Index">Return to Original List</a>
</div>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
I am trying put the data card in the left and align the search filters in the right 2 in a row and show them in 3 rows.
I tried changing the sizes of the col-lg-* in each row on the filters but still cannot align them like what I am trying any help is greatly appreciated
CodePudding user response：
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="card border-info mb-3" style="max-width: 12rem;">
<div class="card-header text-center"><b>Current Shipping Address</b></div>
<div class="card-body text-info" style="font-size: 14px;">
<b><h7 class="card-title">Location</h7></b>
<p class="card-text">
@Html.DisplayFor(model => model.CustomerData.Location)
<br />@Html.DisplayFor(model => model.CustomerData.Address1)
</p>
</div>
</div>
</div>
<div class="col-md-9">
<section class="search-sec">
<div class="container-fluid">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-lg-12">
<div class="row mb-3">
<div class="col-lg-6 col-md-2 form-check-inline mr-0">
<label for="name" class="col-auto">Strain Name</label>
<input class="form-control" type="text" name="name" value="@ViewData["name"]" />
</div>
<div class="col-lg-6 col-md-2 form-check-inline mr-0">
<label for="genotype" class="col-auto">Genotype</label>
<input class="form-control" type="text" name="genotype" value="@ViewData["genotype"]" />
</div>
</div>
<div class="row mb-3">
<div class="col-lg-3 col-md-2 col-sm-12 form-check-inline m-0">
<label for="age" class="col-auto" >Age</label>
<select class="form-control px-1" name="age">
<option>-Any-</option>
</select>
</div>
<div class="col-lg-9 col-md-2 col-sm-12 form-check-inline m-0 justify-content-between">
<label class="col-auto" for="minAge">Age range between</label>
<select class="form-control" name="minAge">
<option>-Start-</option>
</select>
<label class="col-auto" for="minAge">and</label>
<select class="form-control" name="maxAge">
<option>-End-</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-12 form-check-inline m-0">
<label class="col-auto" for="sex">Sex</label>
<select class="form-control px-1" name="sex">
<option>-Either-</option>
</select>
</div>
<div class="col-lg-5 col-md-2 col-sm-12 form-check-inline m-0">
<label class="col-auto" for="stockNumber">Find by Stock Number</label>
<input type="text" class="form-control" name="stockNumber" value="@ViewData["stockNumber"]" />
</div>
<div class="col-lg-5 col-md-2 col-sm-12 form-check-inline m-0">
<input type="submit" value="Search" class="btn btn-default" /> |
<a class="btn btn-link" asp-action="Index">Return to Original List</a>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
