{ "componentChunkName": "component---src-pages-blog-markdown-remark-fields-slug-js", "path": "/blog/django-bootstrap-login-template", "result": {"data":{"markdownRemark":{"html":"

Table of Contents

\n
    \n
  1. High Level Refresher
    2. \n
  2. Prerequisites
    3. \n
  3. Setting up a Django Application
    4. \n
  4. Editing Project Configs\n\n
    5. \n
  5. Building the Login Screen with Bootstrap\n\n
    6. \n
  6. Running the Application
    7. \n
  7. Conclusion
    8. \n
\n

High Level Refresher

\n

Django is a high-level Python framework that follows the model-template-views architectural pattern. Django is one of the most popular web frameworks due to its security, scalability, and flexible design. Companies like Instagram, Reddit, and Dropbox all used Django.

\n

Bootstrap is an open-source CSS framework that provides pre-built HTML, CSS, and JavaScript components. This includes elements such as navigation bars, forms, buttons, modals, and more. Originally created by Twitter, Bootstrap is now maintained by a large developer community.

\n

Prerequisites

\n\n

Setting up a Django application

\n

Let’s first create a project. In your command line, find the correct directory, and run the following command:

\n\n \n \n \n \n
$ django-admin startproject django_login
\n

This creates the project we’ll be working in. From there, we’ll need to create an application. Since we’re building a login screen, navigate into the project with cd django_login, and run the following command:

\n\n \n \n \n \n
$ python3 manage.py startapp login
\n

Let’s now run the server to test if everything has been set up correctly. Run the following command:

\n\n \n \n \n \n
$ python3 manage.py runserver
\n

By deploying our Django application, we can check in real-time if the build is compiling correctly. Since we have only initialized our Django application, in localhost:8000/, you should see the following webpage:

\n

\n \n \n \n \n

\n

Editing Project Configs

\n

django_login/settings.py

\n

First, we’ll notify our project that we’ve created an application. To do this, go into the django_login folder and find the settings.py file. Scroll down to the INSTALLED_APPS section and add 'login' (our application name) to the list of applications.

\n

\n \n \n \n \n

\n

django_login/urls.py

\n

From there, we’ll need to edit the urls.py file to account for our new application. We will be using the built-in LoginView from Django which will display the login form and process the login action.

\n

Replace the template code with the following:

\n\n \n \n \n \n
from django.contrib import admin\nfrom django.urls import path, include\nfrom django.contrib.auth.views import LoginView\n\nurlpatterns = [\n    path('', LoginView.as_view()),\n    path('login/', include('login.urls')),\n    path('admin/', admin.site.urls),\n]
\n

Building the login screen with Bootstrap

\n

login/templates/registration/login.html

\n

First, within the login folder, we’ll need to create a templates folder, and then a registration folder within. From there, we’ll create a login.html file.

\n

Because we’re using the built-in LoginView of Django, we must provide the HTML template with the registration/login.html format.

\n

Inside login.html, we’ll add the following Bootstrap code (delivered via CDN for convenience, though there are other Bootstrap installation methods):

\n\n\n \n \n \n \n Signin\n \n \n \n \n \n
\n

Django Login Demo

\n {% csrf_token %}\n \n \n
\n \n
\n \n
\n \n\n\n`, `8641326152561990000`)\"\n >\n \n \n \n \n
<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <title>Signin</title>\n    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD\" crossorigin=\"anonymous\">    \n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN\" crossorigin=\"anonymous\"></script>\n    \n  </head>\n  <body class=\"text-center\">\n    <form class=\"form-signin\">\n      <h1 class=\"h3 mb-3 font-weight-normal\">Django Login Demo</h1>\n      {% csrf_token %}\n      <input id=\"inputEmail\" class=\"form-control\" placeholder=\"Email address\" required=\"\" autofocus=\"\" type=\"email\">\n      <input id=\"inputPassword\" class=\"form-control\" placeholder=\"Password\" required=\"\" type=\"password\">\n      <div class=\"checkbox mb-3\">\n        <label>\n          <input value=\"remember-me\" type=\"checkbox\"> Remember me\n        </label>\n      </div>\n      <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\">Sign in</button>\n    </form>\n  </body>\n</html>\n\n<style>\nhtml,\nbody {\n  height: 100%;\n}\n\nbody {\n  display: -ms-flexbox;\n  display: -webkit-box;\n  display: flex;\n  -ms-flex-align: center;\n  -ms-flex-pack: center;\n  -webkit-box-align: center;\n  align-items: center;\n  -webkit-box-pack: center;\n  justify-content: center;\n  padding-top: 40px;\n  padding-bottom: 40px;\n  background-color: #f5f5f5;\n}\n\n.form-signin {\n  width: 100%;\n  max-width: 330px;\n  padding: 15px;\n  margin: 0 auto;\n}\n\n.form-signin .checkbox {\n  font-weight: 400;\n}\n\n.form-signin .form-control {\n  position: relative;\n  box-sizing: border-box;\n  height: auto;\n  padding: 10px;\n  font-size: 16px;\n}\n\n.form-signin .form-control:focus {\n  z-index: 2;\n}\n\n.form-signin input[type=\"email\"] {\n  margin-bottom: -1px;\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.form-signin input[type=\"password\"] {\n  margin-bottom: 10px;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n</style>
\n

login/views.py

\n

Now that we have our HTML, we need to render it in Django. Go to the views.py file and replace the template code with the following:

\n\n \n \n \n \n
from django.shortcuts import render\n\ndef index(request):\n    return render(request, 'authentication/login.html')
\n

Running the application

\n

Once everything is set up, your login folder structure should look like this:

\n

\n \n \n \n \n

\n

When we run python manage.py runserver, the following webpage should show up on your localhost.

\n

\n \n \n \n \n

\n

Great success!

\n

Conclusion

\n

Congrats - you’ve created a login screen using Django with Bootstrap! You’ll still need to set up the authentication logic (hashing & storing the user credentials, session management, building the signup and forgot password screens, and redirecting post-login).

\n

But for now - time to celebrate!

\n

At SuperTokens, we simplify your authentication process - and help you set up a fully functioning Django authentication flow within minutes. Check us out or message us on Discord!

","frontmatter":{"date":"July 10, 2024","title":"Setting up an authentication form with bootstrap in a Django application","cover":"django_bootstrap_banner.png","author":"Nemi Shah","description":"This tutorial wil guide you on how you can setup a bootstrap login template in Django"},"fields":{"slug":"/django-bootstrap-login-template/"}},"site":{"siteMetadata":{"title":"SuperTokens Blog"}}},"pageContext":{"id":"70139935-64d2-5b9e-bf71-7eb8a5316c84","fields__slug":"/django-bootstrap-login-template/","__params":{"fields__slug":"django-bootstrap-login-template"}}}, "staticQueryHashes": []}