What techniques can I use to center this form properly in both bootstrap and plain CSS? So far, I have been able to center some parts of it, but when I try to center others, they shrink and create a mess. When I use bootstrap to center the elements, they become very small, so I believe I am not taking into account the
col-sm-2
class that they have. How can I resolve this issue?
<h2>Operazione Spot</h2>
<h2>@Model.Heading</h2>
<hr />
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(m => m.Valuta, new { @class = "col-sm-2 control-label" })
<div class="col-md-3">
@Html.TextBoxFor(m => m.Valuta, "{0:dd-MM-yyyy}", new { @class = "form-control", @Value = @DateTime.Now.ToShortDateString(), @readonly = "readonly" })
</div>
@Html.LabelFor(m => m.Sell, new { @class = "col-sm-2 control-label" })
<div class="col-md-3">
@Html.EditorFor(m => m.Sell, new { htmlAttributes = new { @class = "form-control", placeholder = " eg 34.55" } })
@Html.ValidationMessageFor(m => m.Sell, "", new { @class = "text-danger " })
</div>
@Html.LabelFor(m => m.Buy, new { @class = "col-sm-2 control-label" })
<div class="col-md-3">
@Html.EditorFor(m => m.Buy, new { htmlAttributes = new { @class = "form-control", placeholder = " eg 34.55" } })
@Html.ValidationMessageFor(m => m.Buy, "", new { @class = "text-danger " })
</div>
@Html.LabelFor(m => m.Cliente, new { @class = "col-sm-2 control-label" })
<div class="col-md-3">
@Html.DropDownListFor(m => m.ClienteId, new SelectList(Model.Cliente, "Id", "Name"), new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Cliente, "", new { @class = "text-danger " })
</div>
@Html.LabelFor(m => m.Note, new { @class = "col-sm-2 control-label" })
<div class="col-md-3">
@Html.TextAreaFor(m => m.Note, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Note, "", new { @class = "text-danger " })
</div>
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-primary">Apply</button>
<a class="btn btn-default" href="@Url.Action("Index", "Home")"> Cancel</a>
</div>
</div>
}