Je suis nouveau sur Front end .... Je voudrais centrer un formulaire.

Je viens de le faire en utilisant.

Mais mon guide m'informe que ce n'est pas la bonne pratique.

Existe-t-il un moyen de centrer ce formulaire. C'est bootstrap 4.1.0

Je peux voir que "mx-auto" pour l'espacement dans la documentation de bootstrap. Mais cela ne fonctionne pas non plus dans ce cas.

Je ne sais donc pas comment le faire. Je veux juste aligner le formulaire au centre des appareils moyens et grands. Il n'est pas nécessaire de centrer sur les appareils mobiles.

Je vous remercie

        <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>
2
Anoop 4 nov. 2019 à 08:24

4 réponses

Si vous souhaitez créer le centre, veuillez utiliser les classes de démarrage .ml-auto, .mr-auto.

0
Hanuman Sahay 4 nov. 2019 à 06:29

Si vous utilisez bootstrap, ajoutez cette classe bootstrap qui rend votre centre de formulaire:

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

0
Akshita Karetiya 4 nov. 2019 à 07:19
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>
0
Jadav Palak 4 nov. 2019 à 08:06

Cela pourrait être une solution de contournement, mais ce que j'avais l'habitude de faire est de diviser la disposition entière en trois colonnes et d'inclure le contenu à centrer dans la colonne du milieu, comme ceci.

<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>
0
Jacob Nelson 4 nov. 2019 à 05:35