A Slacker’s Guide to Programming
Create a Simple Django Boilerplate (Part 4)
In this tutorial, we will learn how to integrate Bootstrap with Django.
Introduction
This was what we achieved in part 3 of the tutorial.
- Created our demo models
- Set up admin login credentials
- Created our model fieldset in the admin page
- Wrote a view that reads the records from the database and renders the results to a template
Up till now, we are doing really basic HTML stuff for our view. Let us enhance the boilerplate using Bootstrap.
What is Bootstrap?
Bootstrap is a popular open source front-end component library. It was originally developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools.
It is a great toolkit for both rapid prototyping and developing web applications.
Reusable Django templates
Before we move on, let's talk about Django template inheritance.
Template inheritance is a Django concept that allows you to create an HTML template with blocks that child templates can override.
This allows you to abstract HTML snippets into separate files and includes in templates without writing the same piece of code multiple times.
The added benefit is that if you need to change a portion of that code, you'll only do it in one location.
Let us start by creating a base template. We will start with a basic Bootstrap grid and use BootstrapCDN for our CSS and JS.
Create a base.html in boilerplate/templates/boilerplate and paste in the following code.
<html>
<head>
<title>A Simple Django Boilerplate</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="##">Header</a>
</nav>
<div class="container-fluid my-5">
<div class="row">
<div class="col">
{% block content %}
{% endblock %}
</div>
</div>
</div>
<footer class="container-fluid">
<hr>
<h3>Footer</h3>
</footer>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>Edit boilerplate/templates/index.html with the following code
{% extends 'boilerplate/base.html' %}
{% block content %}
<div>
{% for demo in latest_demo_list %}
<h1>{{ demo.demo_title }}</h1>
<p>{{ demo.demo_description }}</p>
{% endfor %}
</div>
{% endblock %}Start your development server and go to http://localhost:8000
Here we defined a block content for our child template to override in base.html.
...
<div class="row">
<div class="col">
{% block content %}
{% endblock %}
</div>
</div>
...Over in index.html, we include this HTML block content in base.html by extending it.
{% extends 'boilerplate/base.html' %}
{% block content %}
<div...
...div>
{% endblock %}With this method, you can abstract any piece of HTML code thus adhering to Django's DRY (Don't Repeat Yourself) principle.
Test yourself by creating the header and footer as separate blocks.
Conclusion
We have come to the end of the tutorial. As you can see, the Django framework makes setting up of web applications a breeze.
It allows developers to focus on important stuff like building applications instead of having to fuss with code configurations.
You can clone the entire source code of this project from the GitHub repo.
