Integrating Bootstrap to Django
Now that you have Django web application ready either with PostgreSQL database installed or deployed to either Heroku or custom domain or just a plain local Django application, you want to have frontend look of a Bootstrap theme that you saw. Of course, Bootstrap framework comes with it’s own goodies of responsiveness and much of heavy lifting of front-end work done for you. I was bit curious/afraid how a standalone template could be integrated into Django’s regimented project layout. Hence, this tutorial is for this purpose and … it’s straightforward!
This github repository has the completed tutorial. This is how a project layout for only directory looks before and after integrating bootstrap:
As you see we have added a bunch of directories in static directory of Django framework.
For this article, I am using startbootstrap-bare theme. Cloned the theme’s github repository. This is how the theme’s layout for only directory looks like:
As you can see, I copied the vendor and its children directory to static directory of Django. I had cloned the theme in the root level of my Django project. So before copying the vendor directory to static folder of Django, href ed files in vendor directory by giving a relative path. Alas, it didn’t work. Got 404 Page not found. Well, that was a pretty straightforward try though. 😄
After some re-reading Django’s managing static files documentation, copied vendor directory to static folder and rest of addendum of the theme eg. README, License to vendor-license directory under static folder. That took care of where to keep Bootstrap folders in Django.
Now taking care of template. Copied Bootstrap’s index.html file to polls directory that is under templates directory. Now here I need to href to Bootstrap theme’s css and js files. As per Django, loaded static template tag and href static files. This is an overview of how href ing vendor ‘s files looks like in the index.html file.
{% load static %
<!DOCTYPE html>
<html lang="en">
<head>
...
<!-- Bootstrap core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
</head>
<body>
...
<!-- Bootstrap core JavaScript -->
<script src="{% static 'vendor/jquery/jquery.slim.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
</body>
</html>Here is a screenshot of local running of the application:
After it, did rest of refactoring of the index.html file to base.html , extended it to index.html file and put polls questions there. This is how it looks after initial customization of the theme.
I am wondering how other frontend framework such as React or Vue is integrated to Django. Process must be pretty similar.
Anyways, Congratulation for integrating Bootstrap theme to your Django app! Hope this helps with your development!
As always, if you like it please do not forget to 👏 or 🔗 or both!
Thank you.
