0

How can I center this form using bootstrap or plain CSS? Up until now I can center some parts of it, but other parts when centered shrink and there is a mess. After I center the elements with boostrap they become very small so I guess I am not considering the

col-sm-2

that they have..How can I solve this?

<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">Aplica</button>
            <a class="btn btn-default" href="@Url.Action("Index", "Home")"> Cancel</a>
        </div>
    </div>
}
Andi Thomaj
  • 67
  • 2
  • 10

1 Answers1

0

This will work!

.form-group {
display: flex;
flex-direction: column;
justify-content:center; //center verticaly
align-items:center; //center horizontally
}
Radical Edward
  • 2,824
  • 1
  • 10
  • 23