如何将@html.editorfor 居中？

Question

Im gonna make an edit page that updates bikes. Ive been using bootstrap for html design, but looks like it doesnt work correctly anymore. Here's my codes;

 @model Avent.Entity.Bike

@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Edit Bike @Model.Brand @Model.BikeModel</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    
<div class="form-horizontal col-12 text-center">
    <h4>Bike</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @Html.HiddenFor(model => model.Id)
    <img class="img-thumbnail" src="@Model.Image" />
    <div class="form-group text-center">
        @Html.LabelFor(model => model.CreationDate, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-6 text-center">
            @Html.EditorFor(model => model.CreationDate, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.CreationDate, "", new { @class = "text-danger" })
        </div>
    </div>

I tried whatever i can do but labels put center and textboxes not. :( Can you please help me?

Answer 1

You can use '.justify-content-center' or '.offset-md-3' classes from the Grid System of Bootstrap .

Here is a sample code. https://www.codeply.com/p/CH1zSO7u6j