How to boostrap a Django login form

I am writing a library management system in Django for my own personal needs. I have experience in backend,but I lack expertise in frontend. The project makes use of Boostrap 4 and Django's crispy forms.

I have a base template templates/base.html from which other children templates inherit from.

<!-- templates/base.html -->
<!doctype html>

<html lang="en">
  <head>
    <!-- required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, 
    shrink-to-fit=no">

    <!-- boostrap css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" 
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
    <title>Book manager</title>
  </head>   

  <body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
      <a class="navbar-brand" href="">Books</a>     
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
          aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        {% if user.is_authenticated %}
      <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link dropdown-toggle" href="#" id="userMenu" data-toggle="dropdown" 
               aria-haspopup="true" aria-expanded="false"> {{user.username}}</a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userMenu">
           <a class="dropdown-item" href="#"> Change password</a> 
          </div>
        </li>
      </ul>   
     
    {% else %}
       <form class="form-inline ml-auto">
            <a href="{% url 'login' %}" class="btn btn-outline-secondary">Log in</a>
        <a href="" class="btn btn-primary ml-2">Sign up</a>
           </form>         
    {% endif %}

      </div>
      </nav>
    {% block content %}
    <!-- here goes html content of childs-->

    {% endblock  %}

    <!-- optional js -->
    <!-- jquery first, popper then bootstrap --> 

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
     integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" 
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
            crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" 
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
            crossorigin="anonymous">
    </script>
  </body>     

</html>

At the moment I want to put the login form at the center of the page. The login form is inside templates/registration/login.html.

{% extends 'base.html' %}   

{% load crispy_forms_tags %}

{% block content %}
<div class="row justify-content-center align-items-center h-100">
  <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3">
     <form method="post"> {% csrf_token %}
        {{form | crispy }}
        <input type="submit" value="Login">
     </form>
    </div>
</div>
{% endblock %}

The following is how the login form looks.

enter image description here

I want it to be in the center of the screen. I would appreciate anyone's help and advice. I am new to frontend.

The form already is centered, horizontally, so I guess you mean you want it centered vertically. The problem is that to center vertically, you need to know the height of the parent holding the <div> that contains the form. In your case, I guess it would be the height of the browser window, but that would vary depending on the size of the user's screen.

What you can try is to wrap the whole thing in a <div> and set the height of that in px (Note I often color the background of HTML elements to help me during debugging, so I added it here as well):

{% block content %}
<div id="form-container" class="container" style="background-color:lightpink; width: 800px; height:100px;">
    <div class="row justify-content-center align-items-center h-100">
        <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3">
            <form method="post"> {% csrf_token %}
                {{form | crispy }}
                <input type="submit" value="Login">
            </form>
        </div>
    </div>
</div>
{% endblock %}

But the above will center the form in a 100px <div>, not on the window! You can use JavaScript to get the size of the window (https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight), and then using JavaScript to add the height to the element (https://stackoverflow.com/a/5192938/10951070).

Back to Top