I'm currently working on a form based on Bootstrap and facing some challenges with positioning elements correctly.
My goal is to create a form with labels/prompts and textboxes. However, I encountered the following issues in my code:
- The label column (col-3) appears too wide, reducing it to col-2 makes it too narrow. I aim to make it narrower than its current width.
- All textboxes in the textbox column (col-4) have the same length regardless of their class. I would like them to be wider.
- Uncertainty about whether col-5 is necessary.
- I want the controls to be vertically centered within the row instead of aligned at the top.
I have experimented with different classes and controls but haven't found a solution yet. This code will eventually be embedded in an ASP.Net MVC project using @Html.TextBoxFor, which I believe is not causing the issue.
<div class="container">
<div class="row" style="height:38px">
<div class="col-3">Label 1:</div>
<div class="col-4">@Html.TextBoxFor(m => m.Textbox1)</div>
<div class="col-5"></div>
</div>
<div class="row" style="height:38px">
<div class="col-3">Label 2:</div>
<div class="col-4">@Html.TextBoxFor(m => m.Textbox2)</div>
<div class="col-5"></div>
</div>
</div>