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>