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 (in this case, Roboto) is used for modern typography. -
Responsive Navbar:
A navbar is added that collapses on smaller screens. Navigation links are wired up with Django’s{% url %}tag for easy route management. -
Django Messages:
The Django messaging framework is used to display notifications. We include a small JavaScript snippet that removes these alerts after 5 seconds for a clean user experience. -
Footer:
A simple footer is included at the bottom of every page.
Below is the complete code for base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}My Django Website{% endblock %}</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
.message {
position: fixed;
top: 10px;
right: 10px;
z-index: 1000;
}
</style>
</head>
<body>
<!-- Responsive Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'home' %}">MySite</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'about' %}">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'contact' %}">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Django Messages -->
<div class="message">
{% if messages %}
{% for message in messages %}
<div class="alert alert-info alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endfor %}
{% endif %}
</div>
<!-- Main content -->
<div class="container mt-4">
{% block content %}
{% endblock %}
</div>
<!-- Footer -->
<footer class="bg-light text-center py-4 mt-5">
<div class="container">
<p class="mb-0">© 2025 My Django Website. All rights reserved.</p>
</div>
</footer>
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- JavaScript to remove Django messages after 5 seconds -->
<script>
setTimeout(function() {
const alert = document.querySelector('.alert');
if (alert) {
alert.remove();
}
}, 5000);
</script>
</body>
</html>
2. Creating Sample Pages
Once your base.html is set up, you can create individual pages that extend this base. Here are examples for three pages:
Home Page (home.html)
This is the landing page that welcomes users to your site.
{% extends 'base.html' %}
{% block title %}Home - My Django Website{% endblock %}
{% block content %}
<h1>Welcome to My Django Website!</h1>
<p>This is the landing page. Explore our website to learn more about us.</p>
{% endblock %}
About Page (about.html)
A simple about page that provides more information about your website or company.
{% extends 'base.html' %}
{% block title %}About - My Django Website{% endblock %}
{% block content %}
<h1>About Us</h1>
<p>Learn more about our mission, vision, and the team behind our success.</p>
{% endblock %}
Contact Page (contact.html)
This page can be used for contact forms or simply to display contact information.
{% extends 'base.html' %}
{% block title %}Contact - My Django Website{% endblock %}
{% block content %}
<h1>Contact Us</h1>
<p>Feel free to reach out via our contact form or the details provided below.</p>
{% endblock %}
3. Key Concepts and Best Practices
a. Template Inheritance
By using {% extends 'base.html' %}, all your pages inherit the common layout. This reduces redundancy and makes global updates—like modifying the navbar or footer—much simpler.
b. Responsive Design
Utilizing Bootstrap 5.3 ensures that your site looks great on any device. The responsive navbar automatically adapts to different screen sizes, providing a user-friendly navigation experience.
c. Dynamic Messages with Django
Django’s messaging framework allows you to pass one-time notifications (such as form submission success messages) to your templates. With a small JavaScript snippet, these messages are automatically dismissed after 5 seconds, ensuring that users aren’t distracted by outdated alerts.
d. Extending Functionality
The sample pages demonstrate how easy it is to extend the base template. You can add as many pages as you need, each reusing the same common layout and resources.
Below is an updated version of our Django templates article that not only covers the essentials of a modern base template but also demonstrates enhanced, interactive elements for each individual page.
4. Enhanced Page Templates
We now extend our base template with more interesting, interactive elements for the individual pages.
Home Page (home.html): A Dynamic Landing Experience
The updated home page now features a full-width carousel as a hero section along with a featured cards section that highlights key aspects of your site.
{% extends 'base.html' %}
{% block title %}Home - My Django Website{% endblock %}
{% block content %}
<!-- Hero Section with Carousel -->
<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/1200x400?text=Welcome" class="d-block w-100" alt="Welcome">
<div class="carousel-caption d-none d-md-block">
<h5>Welcome to My Django Website</h5>
<p>Discover our amazing features and services.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1200x400?text=Explore" class="d-block w-100" alt="Explore">
<div class="carousel-caption d-none d-md-block">
<h5>Explore</h5>
<p>Learn more about our innovative solutions.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
<!-- Featured Cards Section -->
<div class="row mt-5">
<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/350x150" class="card-img-top" alt="Feature 1">
<div class="card-body">
<h5 class="card-title">Feature One</h5>
<p class="card-text">A brief description of our first amazing feature.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/350x150" class="card-img-top" alt="Feature 2">
<div class="card-body">
<h5 class="card-title">Feature Two</h5>
<p class="card-text">Discover how our second feature can help you succeed.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/350x150" class="card-img-top" alt="Feature 3">
<div class="card-body">
<h5 class="card-title">Feature Three</h5>
<p class="card-text">Learn about our innovative third feature.</p>
</div>
</div>
</div>
</div>
{% endblock %}
About Page (about.html): Meet Our Team
The updated about page now includes a team section with profile cards that highlight key team members and provide a quick way to connect via LinkedIn.
{% extends 'base.html' %}
{% block title %}About - My Django Website{% endblock %}
{% block content %}
<h1>About Us</h1>
<p>Discover our mission, vision, and meet the team that drives our success.</p>
<!-- Team Section -->
<div class="row mt-5">
<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/300x300" class="card-img-top rounded-circle" alt="Team Member 1">
<div class="card-body text-center">
<h5 class="card-title">Alice Smith</h5>
<p class="card-text">CEO & Founder</p>
<a href="#" class="btn btn-primary btn-sm"><i class="fab fa-linkedin"></i> Connect</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/300x300" class="card-img-top rounded-circle" alt="Team Member 2">
<div class="card-body text-center">
<h5 class="card-title">Bob Johnson</h5>
<p class="card-text">CTO</p>
<a href="#" class="btn btn-primary btn-sm"><i class="fab fa-linkedin"></i> Connect</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/300x300" class="card-img-top rounded-circle" alt="Team Member 3">
<div class="card-body text-center">
<h5 class="card-title">Carol Davis</h5>
<p class="card-text">Creative Director</p>
<a href="#" class="btn btn-primary btn-sm"><i class="fab fa-linkedin"></i> Connect</a>
</div>
</div>
</div>
</div>
{% endblock %}
Contact Page (contact.html): An Interactive Contact Form
For the contact page, we’ve integrated a modern, responsive contact form along with a Google Maps embed to show your location. We’ve even added a modal dialog that can be triggered upon successful form submission.
{% extends 'base.html' %}
{% block title %}Contact - My Django Website{% endblock %}
{% block content %}
<h1>Contact Us</h1>
<p>If you have any questions or inquiries, please fill out the form below.</p>
<div class="row mt-4">
<div class="col-md-8">
<form method="post">
{% csrf_token %}
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" name="message" rows="5" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>
<div class="col-md-4">
<!-- Google Maps Embed -->
<div class="ratio ratio-4x3">
<iframe src="https://maps.google.com/maps?q=New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed"
style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</div>
<!-- Success Modal (optional) -->
<div class="modal fade" id="successModal" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="successModalLabel">Thank You!</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Your message has been sent successfully.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript to trigger modal after form submission -->
<script>
// This script assumes that your backend sets a context variable 'message_sent'
// upon successful form submission.
{% if message_sent %}
var successModal = new bootstrap.Modal(document.getElementById('successModal'));
successModal.show();
{% endif %}
</script>
{% endblock %}
5. Conclusion
This practical guide has walked you through setting up a comprehensive Django templating structure. With a well-organized base.html file that incorporates Bootstrap 5.3, Bootstrap Icons, Font Awesome, and Google Fonts, along with a responsive navbar, footer, and auto-dismissing Django messages, you now have a solid foundation for building modern, responsive websites with Django.
Feel free to customize the code to match your project’s specific needs, and explore additional Django features to enhance your web application further.
0 Comments