The Practical Guide to Django Templates

Django’s templating system is a powerful way to separate presentation from business logic. In this guide, we’ll build a robust base.html template that leverages popular front-end libraries such as Bootstrap 5.3, Bootstrap Icons, Font Awesome, and Google Fonts. Additionally, we’ll incorporate a responsive navbar, a footer, and Django’s messaging framework with JavaScript that automatically dismisses alerts after 5 seconds. We’ll also create three sample pages—home.html, about.html, and contact.html—to demonstrate how to extend the base template.

1. Setting Up the Base Template (base.html)

The base.html template serves as the skeleton for all your pages. By placing common elements—like the header, footer, and scripts—in one file, you ensure consistency and ease future maintenance.

Key Elements in base.html:

• CSS Frameworks and Icon Libraries:
  We load Bootstrap 5.3 via its CDN, alongside Bootstrap Icons and Font Awesome for a variety of icon options. Google Fonts