I am facing an issue with my form layout while trying to capture user input. The use of Bootstrap is creating two columns for text boxes and their labels, but the alignment goes off track with the last EditorFor element. I'm questioning if I am misusing divs and column options. Also, how can I introduce some padding between the text boxes' top and bottom edges? Is it achievable through CSS padding?
My desired layout involves having the last label on the left side, followed by a textbox in alignment with it to take up the remaining space in that column, possibly with a bit of gap between rows.
The code snippet from my View is as follows:
@model iskbv5.Models.Vendor
@{
ViewBag.Title = "Add New Vendor";
}
<h2>@ViewBag.Title</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<hr />
<div class="form-group">
<div class="control-label col-md-2">
Vendor Name
</div>
<div class="col-md-4">
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div class="form-group">
<div class="control-label col-md-2">
Vendor Website
</div>
<div class="col-md-4">
@Html.EditorFor(model => model.Website, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
// More similar elements here...
The Usage property in question is set to:
[DataType(DataType.MultilineText)]
public string Usage { get; set; }
This is how the current display looks like.