When I create a form with input fields and labels in an ASP.NET view, I notice that labels with multiple words break into separate lines at full scale. I would like to keep these labels on one line for better aesthetics.
Here's an example:
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
<div class="container">
<div class="row ">
<div class="col-lg-4 col-md-6">
<div class="form-group">
@Html.LabelFor(model => model.MyAttr,"MyLabel", htmlAttributes: new { @class = "control-label col-md-1 label-operation" })
<div class="col-md-12">
@Html.EditorFor(model => model.MyAttr, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.MyAttr, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="form-group">
@Html.LabelFor(model => model.MyAttr2, "My Label Two", htmlAttributes: new { @class = "control-label col-md-1 label-operation" })
<div class="col-md-12">
@Html.EditorFor(model => model.MyAttr2, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.MyAttr2, "", new { @class = "text-danger" })
</div>
</div>
</div>
</div>
</div>
</div>
}
https://i.sstatic.net/HKeHv.png
(The label-operation CSS class is my own, it currently only sets the font-size.)
.label-operation {
font-size: 12px;
}
UPDATE
I have experimented with different col-md values as suggested, resulting in the following: