How can I solve problem with Django Template Language {{ form }}?

Question

<div class="form-title">
    {% if form.errors %}
        <p>{{ form.errors.error }}</p>
    {% endif %}

    <form action="{% url 'login' %}" method="post" class="fs-title">
        {{ form }}
        {% csrf_token %}
        <button type="submit" class="btn btn-success">Join</button>
    </form>
    
    <a href="{% url 'password_reset' %}">Forgot password?</a>
</div>

I tried specifying the css name in the class attribute, but the output from {{form}} did not change its style. Is there a way to move the content of {{form}} to the center and set a style for it?

Answer 1

I recommend you use django-crispy-forms as it makes the fields look nicer and have bootstrap classes with less effort.

Check these two links out:-

https://pypi.org/project/django-crispy-forms/

https://django-crispy-forms.readthedocs.io/en/latest/

And as you use Bootstrap you can do something like this to make it centered (note that I have used crispy forms):-

<div class="mx-auto" style="max-width: 30rem;">
    <form action="{% url 'login' %}" method="post">
        {% csrf_token %}
        {{ form|crispy }}
        <button class="btn btn-primary" type="submit">Join</button>
        <a href="{% url 'password_reset' %}" class="text-center">Forgot password?</a>
    </form>
</div>