I went down the django-widget-tweaks route to solve it. Thanks.
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<h1 class="text-center login-title">Sign in</h1>
<div class="account-wall">
<img class="profile-img"
src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120";
alt="">
{% block content %}
{% load widget_tweaks %}
{% if form.errors %}
<p>Your username and password didn't match. Please try again.</p>
{% endif %}
{% if next %}
{% if user.is_authenticated %}
<p>Your account doesn't have access to this page. To proceed,
please login with an account that has access.</p>
{% else %}
<p>Please login to see this page.</p>
{% endif %}
{% endif %}
<form method="post" action="{% url 'login' %}">
{% csrf_token %}
<div>
{{
form.username|add_class:"form-control"|append_attr:"placeholder:Username" }}
</div>
<div>
{{
form.password|add_class:"form-control"|append_attr:"placeholder:Password" }}
</div>
<div>
<button class="btn btn-lg btn-primary btn-block"
type="submit">
Sign in</button>
<input type="hidden" name="next" value="{{ next }}" />
</div>
</form>
{# Assumes you setup the password_reset view in your URLconf #}
<p><a href="{% url 'password_reset' %}">Lost password?</a></p>
{% endblock %}
</div>
</div>
</div>
</div>
</div>
</div>
On Thursday, 7 June 2018 00:42:40 UTC+2, Daniel Germano Travieso wrote:
>
> Hey!
>
> You should check the documentation
> https://docs.djangoproject.com/en/2.0/topics/forms/#working-with-form-templates
>
> for the Forms that django uses. Each form has it's fields as attributes
> that generate the input tag that will house the input you receive.
>
> You could, for example, create a customize the User login form, and use
> the attrs attributes for the widget class of each field
> https://docs.djangoproject.com/en/2.0/ref/forms/widgets/
>
> There are also some handy django apps that can make your life easier, for
> example this one
> https://github.com/jazzband/django-widget-tweaks/blob/master/README.rst
> that enables you to set the class attribute off the template tag.
>
> I recommend you to try first to do it yourself, as a learning experience
> and then use the django-widget-tweaks when you understand what goes behind
> setting custom widget attrs.
>
>
> Hope it helps!
>
> On Wed, Jun 6, 2018, 17:59 G.R. Nobles <[email protected] <javascript:>>
> wrote:
>
>> Below are two forms, the login form (top) and a bootstrap form (bottom),
>> I'm trying to apply bootstrap to the login page, how can I integrate
>> bootstrap onto the login objects, e.g. {{ form.username }} is the entire
>> textbox, so I'm at a loss being a beginner with Django (my first week).
>>
>> {% if form.errors %}
>> <p>Your username and password didn't match. Please try again.</p>
>> {% endif %}
>>
>> {% if next %}
>> {% if user.is_authenticated %}
>> <p>Your account doesn't have access to this page. To proceed,
>> please login with an account that has access.</p>
>> {% else %}
>> <p>Please login to see this page.</p>
>> {% endif %}
>> {% endif %}
>>
>> <form method="post" action="{% url 'login' %}">
>> {% csrf_token %}
>> <div>
>> <td>{{ form.username.label_tag }}</td>
>> <td>{{ form.username }}</td>
>> </div>
>> <div>
>> <td>{{ form.password.label_tag }}</td>
>> <td>{{ form.password }}</td>
>> </div>
>> </form>
>> <form method="post" action="{% url 'login' %}">
>> <div>
>> <input type="submit" value="login" />
>> <input type="hidden" name="next" value="{{ next }}" />
>> </div>
>> <input type="text" class="form-control" placeholder="Email"
>> required autofocus>
>> <input type="password" class="form-control"
>> placeholder="Password" required>
>> <button class="btn btn-lg btn-primary btn-block"
>> type="submit">
>> Sign in</button>
>> <label class="checkbox pull-left">
>> <input type="checkbox" value="remember-me">
>> Remember me
>> </label>
>> <a href="#" class="pull-right need-help">Need help?
>> </a><span class="clearfix"></span>
>> </form>
>>
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "Django users" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to [email protected] <javascript:>.
>> To post to this group, send email to [email protected]
>> <javascript:>.
>> Visit this group at https://groups.google.com/group/django-users.
>> To view this discussion on the web visit
>> https://groups.google.com/d/msgid/django-users/3aa17d90-3959-4b16-8c14-93c966fb45d0%40googlegroups.com
>>
>> <https://groups.google.com/d/msgid/django-users/3aa17d90-3959-4b16-8c14-93c966fb45d0%40googlegroups.com?utm_medium=email&utm_source=footer>
>> .
>> For more options, visit https://groups.google.com/d/optout.
>>
> --
> []'s
> Daniel Germano Travieso
> Engenharia de Computação UNICAMP
>
--
You received this message because you are subscribed to the Google Groups
"Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-users/3b59efd6-0f6c-40fd-a06c-b73df15b10ae%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
![https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"](https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"){kind=link}