Putting space between my div classes and align them

Issue

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

Solution

<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>

enter image description here

Answered By – Diwyansh

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published