Bootstrap control alignment

Question

I have a div which takes up 4 segments of the 12. I have then created another div which is to the right of my first div and this takes up 8 segments. I am trying to put in this grid 4 labels / input. My problem is they are being shown underneath each other and I want to show label and input underneath then the next to the right etc.

Any help please, as you can tell I am still getting use to bootstrap.

Many thanks,

Thank you taking the time to look at this for me. Here is my code, what is also happening is the second row is not underneath the first row. It's at the bottom: -

 <form asp-controller="CustomerDetailsController" asp-action="CreateEdit" method="post" class="mt-3"> <div class="row"> <div class="col-lg-4"> <div class="form-group"> <label asp-for="customer.Title_Id" class="col-sm-2 col-md-4 col-form-label">Title</label> <div class="col-sm-10"> <select app-for="customer.Title_Id" asp-items="@(new SelectList(Model.titles,"Id","Description"))" class="selectpicker"></select> </div> </div> <div class="form-group"> <label asp-for="customer.FirstName" class="col-sm-2 col-md-4 col-form-label">First Name</label> <div class="col-sm-10"> <input asp-for="customer.FirstName" class="form-control" placeholder="First Name" /> </div> </div> <div class="form-group"> <label asp-for="customer.LastName" class="col-sm-2 col-md-4 col-form-label">Last Name</label> <div class="col-sm-10"> <input asp-for="customer.LastName" class="form-control" placeholder="Last Name" /> </div> </div> <div class="form-group"> <label asp-for="customer.Address_Line_1" class="col-sm-2 col-md-4 col-form-label">Address</label> <div class="col-sm-10"> <input asp-for="customer.Address_Line_1" class="form-control" placeholder="Address Line 1" /> </div> </div> <div class="form-group"> <div class="col-sm-10"> <input asp-for="customer.Address_Line_2" class="form-control" placeholder="Address Line 2" /> </div> </div> <div class="form-group"> <div class="col-sm-10"> <input asp-for="customer.Town" class="form-control" placeholder="Town" /> </div> </div> <div class="form-group"> <div class="col-sm-10"> <input asp-for="customer.Postcode" class="form-control" placeholder="Post Code" /> </div> </div> <div class="form-group"> <div class="col-sm-10"> <input asp-for="customer.County" class="form-control" placeholder="County" /> </div> </div> <div class="form-group"> <label asp-for="customer.TelephoneNo" class="col-sm-2 col-md-4 col-lg-6 col-form-label">Telephone No.</label> <div class="col-sm-10"> <input asp-for="customer.TelephoneNo" class="form-control" placeholder="Telephone No." /> </div> </div> <div class="form-group"> <label asp-for="customer.Email" class="col-sm-2 col-md-4 col-lg-6 col-form-label">Email Address</label> <div class="col-sm-10"> <input asp-for="customer.Email" class="form-control" placeholder="Email Address" /> </div> </div> </div> <div class="row align-items-start"> <div class="col-2"> <label asp-for="customer.MeasureLoft" class="col-sm-2 col-md-4 col-lg-6 col-form-label">M (Loft)</label> </div> <div class="col-2"> <label asp-for="customer.MeasureIWI" class="col-sm-2 col-md-4 col-lg-6 col-form-label">M (IWI)</label> </div> <div class="col-2"> <label asp-for="customer.MeasureUFI" class="col-sm-2 col-md-4 col-lg-6 col-form-label">M (UFI)</label> </div> <div class="col-2"> <label asp-for="customer.MeasureRIR" class="col-sm-2 col-md-4 col-lg-6 col-form-label">M (RIR)</label> </div> <div class="col-4"> <label asp-for="customer.MeasureESH_FTCH" class="col-sm-2 col-md-4 col-lg-6 col-form-label">M (ESH/FTCH)</label> </div> </div> <div class="row align-items-start"> <div class="col-2"> <input asp-for="customer.MeasureLoft" class="form-control" style="width:100px;" /> </div> <div class="col-2"> <input asp-for="customer.MeasureIWI" class="form-control" style="width:100px;" /> </div> <div class="col-2"> <input asp-for="customer.MeasureUFI" class="form-control" style="width:100px;" /> </div> <div class="col-2"> <input asp-for="customer.MeasureRIR" class="form-control" style="width:100px;" /> </div> <div class="col-2"> <input asp-for="customer.MeasureESH_FTCH" class="form-control" style="width:100px;" /> </div> </div> </div> </form>

I have added a screen shot. My problem is one the headings seem to be left justified and it ha put them on two line and I want them on one.

Really struggling with this. In the screen shot below I have a div to the left taking up 4 segments and a div to the right taking up 8 segments for the header / input boxes but then I want to show below just 2 entries but its put them at the bottom of the screen. I have a load more entries to add and just done know best practice to break the screen up. Any help is much appreciated.

Answer 1

As per https://getbootstrap.com/docs/5.0/layout/columns :

Try using the container, row and column structure.

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <div class="container"> <div class="row align-items-start"> <div class="col-5"> One of three columns </div> <div class="col-2"> One of three columns </div> <div class="col-5"> One of three columns </div> </div> <div class="row align-items-center"> <div class="col-4"> One of three columns </div> <div class="col-4"> One of three columns </div> <div class="col-4"> One of three columns </div> </div> <div class="row align-items-end"> <div class="col-4"> One of three columns </div> <div class="col-8"> One of three columns </div> </div> </div>