Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67441

How to center a form in bootstrap 4.1

$
0
0

I am new to Front end.... I would like to centre a form .

I just done it by using .

But my lead inform me that it is not the right practice .

So is there any way to centre this form . This is bootstap 4.1.0

I can see that "mx-auto" for spacing in the bootstrap documentation . But it's also not work in this case .

So I am confused how to do it. I just want to align the form to centre in medium and large devices . There is no need to centring in mobile devices.

Thank you

<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>

Viewing all articles
Browse latest Browse all 67441

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>