Как центрировать форму в bootstrap 4.1

Question

Я новичок во Front End .... Я хотел бы центрировать форму.

Я только что сделал это с помощью.

Но мое руководство сообщило мне, что это неправильная практика.

Так есть ли способ центрировать эту форму. Это начальная загрузка 4.1.0

Я вижу это "mx-auto" для пробелов в документации по начальной загрузке. Но это также не работает в этом случае.

Так что я запутался, как это сделать. Я просто хочу выровнять форму по центру на средних и больших устройствах. Нет необходимости центрироваться на мобильных устройствах.

Спасибо

        <form method="post" id="new_regform">
            {% csrf_token %}

            <div class="row R1">
                <div class="col-sm-12 col-md-4" >
                    <div class="form-group">
                        <label for="{{ form.name.id_for_label }}" class="text-capitalize font-weight-bold">{{ form.name.label|title }}{% if form.name.field.required %}<span class="text-danger">*</span>{% endif %}</label>
                        {{ form.name|add_class:'form-control' }}
                        <span class="form-text text-danger">{{form.errors}}</span>
                    </div>
                </div>
                <div class="col-sm-12 col-md-4">
                    <div class="form-group">
                        <label for="{{ form.category.id_for_label }}" class="text-capitalize font-weight-bold">{{ form.category.label|title }}{% if form.category.field.required %}<span class="text-danger">*</span>{% endif %}</label>
                        {{ form.caegory|add_class:'form-control' }}
                        <span class="form-text text-danger">{{form.category.errors}}</span>
                    </div>
                </div>
                <div class="col-sm-12 col-md-4">
                    <div class="form-group">
                        <label for="{{ form.Owner.id_for_label }}" class="text-capitalize font-weight-bold">{{ form.Owner.label|title }}{% if form.Owner.field.required %}<span class="text-danger">*</span>{% endif %}</label>
                        {{ form.Owner|add_class:'form-control' }}
                        <span class="form-text text-danger">{{ form.Owner.errors }}</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <label for="{{ form.Description.id_for_label }}" class="text-capitalize font-weight-bold">{{ form.Description.label|title }}{% if form.Description.field.required %}<span class="text-danger">*</span>{% endif %}</label>
                        {{ form.Description|add_class:'form-control' }}
                        <span class="form-text text-danger">{{form.Description.errors}}</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 col-md-4">
                    <div class="form-group">
                        <label for="{{ form.Identitiy.id_for_label }}" class="text-capitalize font-weight-bold">{{ form.Identity.label|title }}{% if form.Identity.field.required %}<span class="text-danger">*</span>{% endif %}</label>
                        {{ form.Identity|add_class:'form-control' }}
                        <span class="form-text text-danger">{{form.Identity.errors}}</span>
                    </div>
                </div>
                <div class="col-sm-12 col-md-4">
                    <div class="form-group">
                        <label for="{{ form.Guardian.id_for_label }}" class="text-capitalize font-weight-bold">{{ form.Guardian.label|title }}{% if form.Guardian.field.required %}<span class="text-danger">*</span>{% endif %}</label>
                        {{ form.Guardian|add_class:'form-control' }}
                        <span class="form-text text-danger">{{ form.Guardian.errors }}</span>
                    </div>

                </div>
                <div class="col-sm-12 col-md-4">
                    <div class="form-group">
                        <label for="{{ form.Hobby.id_for_label }}" class="text-capitalize font-weight-bold">{{ form.Hobby.label|title }}{% if form.Hobby.field.required %}<span class="text-danger">*</span>{% endif %}</label>
                        {{ form.Hobby|add_class:'form-control' }}
                        <span class="form-text text-danger">{{ form.Hobby.errors }}</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="card border-0">
                    <div class="card-body">
                        <div class="col-12 pull-right text-right">
                            <button class="btn btn-primary text-capitalize font-weight-bold mr-2 Create" type="submit">Submit</button>
                            <a href="#">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>
        </form>

Answer 1

Если вы используете загрузчик, добавьте этот класс начальной загрузки, который сделает ваш центр формы:

d-flex flex-wrap align-content-center text-center

Answer 2

div.form
{
    display: block;
    text-align: center;
}
form
{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

<div class="form">
    <form name="Form1">
        ...
    </form>
</div>

Answer 3

Я делаю это следующим образом. Обратите внимание, что этот код является минимально необходимым. Первый div действует как тело. Если вы хотите центрировать что-то, вы добавите еще один тег, такой как form или div, и сделаете, как хотите.

С помощью CSS:

html, body, #myContainer {
  height: 100%;
}

<html>
    <body>
        <div id="myContainer" class="d-flex align-items-center justify-content-center">
            <form>
                content here
            </form>
        </div>
    </body>
</html>

Без CSS:

<html class="h-100">
    <body class="h-100">
        <div class="d-flex h-100 align-items-center justify-content-center">
            <form>
                content here
            </form>
        </div>
    </body>
</html>

Answer 4

Если вы хотите сделать для центра, пожалуйста, используйте .ml-auto, .mr-auto классы начальной загрузки.

Answer 5

Это может быть обходной путь, но я обычно делил весь макет на три столбца и включал контент, центрируемый в среднем столбце, например:

<div class="row">
    <div class="col-sm-2">&nbsp;</div>
    <div class="col-sm-8">
        <form>
           <!-- Your Code -->
        </form>
    </div>
    <div class="col-sm-2">&nbsp;</div>
</div>