styling form render in Django - django

Question

I'm using Django 2.x
I'm using Formset to be able to add multiple records at one.
the form is rendered in template file as
{{ chapter_questions.as_table }}
Which renders template like below which looks ugly.
I'm using Bootstrap template to design my template to look like
To render template like second image, I'm writing the fields manually as
<div class="form-group">
<div class="col-sm-12 col-xs-12">
<label for="question">Word</label>
<input name="chapterquestion_set-0-word" type="text" class="form-control border-color-2" placeholder="Word" id="question">
{% if chapterquestion_set.word.errors %}
<div class="row">
<div class="col-sm-12">
<div class="alert alert-danger">
<ul>
{% for error in chapter_questions.word.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endif %}
</div>
<div class="col-sm-12 col-xs-12">
<label for="definition">Definition</label>
<input name="chapterquestion_set-0-definition" type="text" class="form-control border-color-3" placeholder="Definition" id="definition">
{% if chapter_questions.definition.errors %}
<div class="row">
<div class="col-sm-12">
<div class="alert alert-danger">
<ul>
{% for error in chapter_questions.definition.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endif %}
</div>
<div class="col-sm-12 col-xs-12">
<label for="audio"></label>
<input name="chapterquestion_set-0-audio" type="text" class="form-control border-color-4" placeholder="Audio" id="audio">
{% if chapter_questions.audio.errors %}
<div class="row">
<div class="col-sm-12">
<div class="alert alert-danger">
<ul>
{% for error in chapter_questions.audio.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endif %}
</div>
</div>
This way I have to write the code multiple times for multiple objects. Also for adding a new object fields, I need to replicate whole code using JavaScript by replacing index number (0 in this case) by updating by 1.
How can I style the form widget so that I could take benefit of Django automatic field insertions and error display and only need {{ chapter_questions.as_bootstrap_div }} to render bootstrap form.

Answer 1

templates/fields/text-field.html
<div class="col-sm-12 col-xs-12">
{{field.label_tag}}
<input name="{{field.name}}" type="text" class="form-control border-color-2" placeholder="{{field.label}}" id="{{field.name}}">
{% if field.errors %}
<div class="row">
<div class="col-sm-12">
<div class="alert alert-danger">
<ul>
{% for error in field.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endif %}
</div>
on your form
{% with chapterquestion_set.word as field %}
{% include 'fields/text-field.html' %}
{% endwith %}