CRUD with Django, PostgreSQL, Bootstrap and Heroku — Part 5: Configuring templates with Bootstrap and FontAwesome

Carlos
2 min readMay 24, 2020

In the previous part, we saw how to configure requests on our Django files.

Now, we’ll code some things on our templates.

First, we should have a structure like this:

What we want now is to create a pattern inside base.html file.

...
<body>
{% block content %}
{% endblock content %}
</body>
...

Now, we’ll extend what we create on base.html inside the employee_form.html and employee_list.html files.

employee_form.html:

{% extends 'employee_register/base.html' %}{% block content %}   <p>We'll show Django form to implement CRUD operations.</p>{% endblock content %}

employee_list.html

{% extends 'employee_register/base.html' %}{% block content %}   <p>We'll show Django list to implement CRUD operations</p>{% endblock content %}

Then, we test our Django server to see if our templates are working.

python manage.py runserver

If we access to http://localhost:8000/employee we should see the following text

Then, we try with http://localhost:8000/employee/list and we’ll get another text:

Now, we’re able to work with HTML templates. For this project, we’ll be using Bootstrap framework, in order to save some time and use responsive elements, and FontAwesome will be used for the icons.

We’ll configure our templates for using Bootstrap framework and FontAwesome icons.

Get Bootstrap

Bootstrap CSS
Bootstrap JS

Get FontAwesome CDN for Bootstrap

Bootstrap FontAwesome CDN
base.html

Now, we’re ready to work with Bootstrap and FontAwesome.

--

--

Carlos

Software Developer and seldom writer. Creates technology and studies its effects on people and society.