Django html: how to center the login form?

my login form is not looking good, it's too wide. how to make it smaller and center in the middle of the page?

enter image description here

signin html:

{% extends "accounts/_base.html" %}

{% block title %}
Sign In
{% endblock %}

{% block control %}
<form class="form-signin" action="{% url 'login' %}" method="post">
    {% csrf_token %}
    <h2 class="form-signin-heading">Sign In</h2>
    <div class="form-group">
        <div class="fieldWrapper">
            {{ form.username.errors }}
            {{ form.username.label_tag }}
            {{ form.username }}
        </div>
        <div class="fieldWrapper">
            {{ form.password.errors }}
            {{ form.password.label_tag }}
            {{ form.password }}
        </div>
    </div>
    <label for="signIn" class="sr-only">Click</label>
    <button id="signIn" class="btn btn-lg btn-primary btn-block" >Sign In</button>        
</form>
<form class="form-signin" action="{% url 'signup' %}">
    <button id="signUp" class="btn btn-lg btn-default btn-block">Sign up now!</button>
</form>
{% endblock %}

base html:

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta CharacterSet='UTF-8'>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{% block title %}{% endblock %}</title>
        {% load static %}
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
        <link rel="stylesheet" href="{% static 'css/style.css' %}">
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="{% static 'js/main.js' %}"></script>
        {% block script %}{% endblock %}
    </head>
    <body>
        <!-- head -->
        <nav id="navbar" class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand mb-0" href="#">Pizza</a>
                </div>
                {% if user is not none %}
                <div id="navbar-collapse" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        {% block nav_list %}{% endblock %}
                    </ul>
                    <form class="navbar-form navbar-right" action="{% url 'logout' %}" method="get">
                        <span>Welcome, {{ user }}.&nbsp;&nbsp;</span>
                        <button id="logout" class="btn btn-default btn-sm">Log out</button>
                    </form>
                </div>
                {% endif %}
            </div>
        </nav>
        <!-- body -->
        <div class="container" id="elem_cont">
            {% if message is not none %}
                <div class="alert alert-{{ message.0 }} alert-dismissable">{{ message.1 }}
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                </div>
            {% endif %}
            {% block control %}
            {% endblock %}            
        </div>
        <div class="container" id="elem_disp">
            {% block disp %}
            {% endblock %}            
        </div>
        <div class="container" id="elem_misc">
            {% block misc %}
            {% endblock %}            
        </div>
        <!-- footer -->
        <nav class="navbar navbar-fixed-bottom" id="nav_footer" role="navigation">
            <div class="container" id="elem_foot">
                <footer class="navbar" id="footer">
                    <hr>
                    {% block botm_cont %}
                    {% endblock %}
                    <p>&copy; 2019 madlogos</p>
                </footer>
            </div>
        </nav>
    </body>
</html>

This is a styling issue for css.

You already have a css file referred to in your template (css/style.css), so you can add a style like the following to it. This will apply the style only to the form with the class form-signin:

form.form-signin {
    max-width: 64ch;
    margin: auto;
}

64ch is a good width for readability if there's a body of text, but you can tweak if it's not quite where you want the form on your page.

margin: auto will automatically handle the distances between the form and its containing div.

Don't forget to test at a variety of screen sizes. You may want to add a min-width value as well if you have other text on the page.

Back to Top