How to put @html.editorfor to center?

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