bootstrap to the login template

[G.R. Nobles]

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>

[Daniel Germano Travieso]

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!

--
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 django-users...@googlegroups.com.
To post to this group, send email to django...@googlegroups.com.
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.
For more options, visit https://groups.google.com/d/optout.

--

[]'s

Daniel Germano Travieso

Engenharia de Computação UNICAMP

[Melvyn Sopacua]

On woensdag 6 juni 2018 22:58:50 CEST G.R. Nobles 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).

I find this difficult to answer, because you mention "apply" and "integrate"
bootstrap. You have a certain expectation there.

What is that expectation?

--
Melvyn Sopacua

[C. Kirby]

I do it this way (Note this is Bootstrap 4a3 and I do some offer the error indication differently

    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <div class="card {% if form.errors %}card-outline-danger text-danger{% endif %}">

                    <form method="post" action="{% url 'login' %}">

{% csrf_token %}
                        <div class="card-header {% if form.errors %}card-danger{% else %}card-primary{% endif %} card-inverse">
                            <h4 class="card-title">Login</h4>
                        </div>
                        <div class="card-block">
                            {% if form.errors %}
                                <h6 class="card-title">
                                    <small>Incorrect Login. Please Try Again</small>
                                </h6>
                            {% endif %}
                            <div class="card-text">

                                <div class="form-group row">
                                    <div class="col-sm-12">
                                        <input type="text" class="form-control form-control-lg"
                                               id="{{ form.username.id_for_label }}" name="username"
                                               placeholder="Username">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-sm-12">
                                        <input type="password" class="form-control form-control-lg"
                                               id="{{ form.password.id_for_label }}" name="password"
                                               placeholder="Password">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <input class="btn btn-primary" type="submit" value="Login"/>
                            <button class="btn btn-sm btn-secondary pull-right" type="button" onclick="window.location.href='{% url 'registration_register' %}';">New User</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>




Kirby


[G.R. Nobles]

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>