DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • Mistakes That Django Developers Make and How To Avoid Them
  • Choosing the Best CSS Frameworks for Enterprise Web Applications
  • The Best Programming Languages for Kids
  • Introduction To Template-Based Email Design With Spring Boot

Trending

  • Unlocking Data with Language: Real-World Applications of Text-to-SQL Interfaces
  • Concourse CI/CD Pipeline: Webhook Triggers
  • Blue Skies Ahead: An AI Case Study on LLM Use for a Graph Theory Related Application
  • Cookies Revisited: A Networking Solution for Third-Party Cookies
  1. DZone
  2. Coding
  3. Frameworks
  4. Django Bootstrap Login Template (How-To)

Django Bootstrap Login Template (How-To)

This article presents a step-by-step tutorial for creating a login screen using Django with Bootstrap.

By 
Advait Ruia user avatar
Advait Ruia
·
Mar. 15, 23 · Tutorial
Likes (1)
Comment
Save
Tweet
Share
4.1K Views

Join the DZone community and get the full member experience.

Join For Free

High-Level Refresher

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 use Django.

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.

Prerequisites

  • A basic understanding of HTML, CSS, and Javascript
  • A basic understanding of Django
  • Python3 installed on your machine
  • Django installed on your machine

Setting up a Django Application

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

 
 django-admin startproject django_login


This creates the project we’ll be working on. 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:

 
$ python3 manage.py startapp login


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

 
$ python3 manage.py runserver


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:

Django Webpage

Below is a command-line screenshot of setting up a Django application from scratch. 

command-line screenshot

Editing Project Configs

django_login/settings.py

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.

notify our project that we’ve created an application

django_login/urls.py

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.

Replace the template code with the following:

Python
 
from django.contrib import admin
from django.urls import path, include
from django.contrib.auth.views import LoginView

urlpatterns = [
    path('', LoginView.as_view()),
    path('login/', include('login.urls')),
    path('admin/', admin.site.urls),
]


Building the Login Screen With Bootstrap

login/templates/registration/login.html

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.

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

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

Python
 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta data-fr-http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Signin</title>
    <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">    
    <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>
    
  </head>
  <body class="text-center">
    <form class="form-signin">
      <h1 class="h3 mb-3 font-weight-normal">Django Login Demo</h1>
      {% csrf_token %}
      <input id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="" type="email">
      <input id="inputPassword" class="form-control" placeholder="Password" required="" type="password">
      <div class="checkbox mb-3">
        <label>
          <input value="remember-me" type="checkbox"> Remember me
        </label>
      </div>
      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>
  </body>
</html>

<style>
html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}

.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}

.form-signin .form-control:focus {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
</style>


login/views.py

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:

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


Running the Application

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

Running the Application

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

Webpage

Great success!

Conclusion

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

But for now — time to celebrate!

CSS Bootstrap (front-end framework) Django (web framework) Template Python (language)

Published at DZone with permission of Advait Ruia. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Mistakes That Django Developers Make and How To Avoid Them
  • Choosing the Best CSS Frameworks for Enterprise Web Applications
  • The Best Programming Languages for Kids
  • Introduction To Template-Based Email Design With Spring Boot

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!