Adding JQuery and Boostrap to Django Web framework by using static files

JQuery with Bootstrap ads many functionality to web page. We will learn how to integrate JQuery and Bootstrap to our Django framework. Let us start with our project name jq

django-admin startproject jq

For our project we will change the settings.py to include static files.

What is a static files

In our project we will be using several style (or CSS) , JavaScript or images files. These are known as static files and for better management we will keep these files in different folders.

Before going for static files let us set up the Template Directory for the project and keep our html file inside it.

Template Directory

We have one template directory as my_templates and let us keep one register.html file inside it. In our settings file ( settings.py ) we have to tell Django about our template directory.

settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'my_templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Inside my_templates directory we kept our register.html file, this file is our main file where we will connect our Bootstrap and JQuery static files.

Understanding the urls

In our Django Basic tutorial we have already explained about Django url structure to display pages. Here it is again explained.

Let us start with Project urls.py which is inside plus2net directory ( name of our project is plus2net)

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
	path('', include('jq.urls'))
]

So any call to home page ( http://127.0.0.1:8000/register ) will direct to urls.py inside jq. Our urls.py inside jq is here .

from django.urls import path,include
from . import views
urlpatterns = [
	path('register',views.register,name='register'),
	path('',views.blank,name='blank'),
]

This will call the function register inside views.py. Now let us check views.py.

from django.shortcuts import render
from django.http import HttpResponse 

# Create your views here.

def register(request):
	return render(request, 'register.html')
	
def blank(request):
	return HttpResponse('Welcome to plus2net')

Where is our register.html page ? We will add that but before that let us do some settings

Check settings.py file

STATIC_URL = '/static/'

Here we are defining our STATIC_URL, this we will use to refer in our pages.


STATICFILES_DIRS = [
	os.path.join(BASE_DIR,'static')
]

Here we have set our static URL page so same can be used for our templates. Now create one directory saying static. Run this command.

python manage.py collectstatic

Now we are ready to add static pages to our html pages. We have created register.html page inside my_templates directory. Now modify the code.

register.html

{% load static %}
<html>
<head>
<link rel='stylesheet' href="{% static 'css/my_style.css' %}" type='text/css'>
</head>
<body>
<h2 class=my_h2>I am from inside my_templates dir , register.html page</h2> 
</body>
</html>

First we have loaded the static tag. This tag we have used to tell Django where is my files to link. Note the line linking the .css file. This file is stored inside static directory. Its path is here .

<link rel='stylesheet' href="/static/css/my_style.css" type='text/css'>

Now similarly we will keep our JavaScript files, image files in different directories inside static directory.

Adding JQuery

What is JQuery ?
We will link our JQuery file as any external JavaScript file inside our register.html page. We may use many more JavaScript files so let us keep them inside a new folder and name it is as js. Create one folder js inside static directory. ( it will be parallel to our CSS directory already we have created )

Download Jquery file from https://jquery.com/download/ , save as juqery-3.4.1.js inside static/js directory. The file name may change based on your downloaded version.

We will link to this file like this .

<script src="{% static 'js/jquery-3.4.1.min.js' %}"></script>

Testing JQuery code

We will check our JQuery code by executing one simple button click event script. Here is the complete code or our register.html page.

{% load static %}
<html>
<head>
<link rel='stylesheet' href="{% static 'css/my_style.css' %}" type='text/css'>

</head>
<body>
<h2 class=my_h2>I am from inside my_templates dir , register.html page</h2>
<input type=button value='Click me' id='b1'>
<div id=t1></div>

<script src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
<script>
$(document).ready(function() { 
///////////////////////
$("#b1").click(function(){
$("#t1").html('You clicked the button');
});
/////////////////////

});
</script>
 
</body>
</html>

Adding Bootstrap

What is Bootstrap ?
Download Bootstrap from here .
https://getbootstrap.com/docs/4.0/getting-started/download/ , this link may change based on the version you are downloading. Collect the boostrap.js file and boostrap.css file and place them in respective directories ( boostrap.js inside js directory & boostrap.css inside css directory )

Now let us add bootstrap class to our button. ( change the html code for button inside register.html file )

<button type='button' class='btn btn-danger' id='b1'>Click Me</button>

You can learn more on bootstrap buttons here.

register.html

{% load static %}
<html>
<head>
<link rel='stylesheet' href="{% static 'css/my_style.css' %}" type='text/css'>
<link rel='stylesheet' href="{% static 'css/bootstrap.css' %}" type='text/css'>
</head>
<body>
<h2 class=my_h2>I am from inside my_templates dir , register.html page</h2>
<button type='button' class='btn btn-danger' id='b1'>Click Me</button>
<div id=t1></div>

<script src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.js' %}"></script>
<script>
$(document).ready(function() { 
///////////////////////
$("#b1").click(function(){
$("#t1").html('You clicked the button');
});
/////////////////////

});
</script>
 
</body>
</html>

Django Admin MySQL Python- Tutorials

Subhendu Mohapatra

Author

🎥 Join me live on YouTube

Passionate about coding and teaching, I publish practical tutorials on PHP, Python, JavaScript, SQL, and web development. My goal is to make learning simple, engaging, and project‑oriented with real examples and source code.

Subscribe to our YouTube Channel here

Django with JQuery & Boostrap