Django templates are a powerful feature that allow you to create dynamic HTML content for your web applications. In this guide, I'll walk you through creating a comprehensive base template that includes modern styling with Bootstrap 5.3, icon libraries, Google Fonts, and functional components like a responsive navbar, footer, and Django message handling.
base.html Template
{% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{% block title %}My Django Site{% endblock %}</title> <!-- Bootstrap 5.3 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.11.0/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 rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet"> <!-- Custom CSS --> <link rel="stylesheet" href="{% static 'css/main.css' %}"> {% block extra_css %}{% endblock %} <style> body { font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; min-height: 100vh; } h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; } main { flex: 1; } .alert-container { position: fixed; top: 80px; right: 20px; z-index: 1050; max-width: 350px; } </style> </head> <body> <!-- Navbar --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="{% url 'home' %}"> <i class="bi bi-house-fill me-2"></i>My Django Site </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link {% if request.resolver_match.url_name == 'home' %}active{% endif %}" href="{% url 'home' %}"> <i class="fa-solid fa-house me-1"></i> Home </a> </li> <li class="nav-item"> <a class="nav-link {% if request.resolver_match.url_name == 'about' %}active{% endif %}" href="{% url 'about' %}"> <i class="fa-solid fa-circle-info me-1"></i> About </a> </li> <li class="nav-item"> <a class="nav-link {% if request.resolver_match.url_name == 'contact' %}active{% endif %}" href="{% url 'contact' %}"> <i class="fa-solid fa-envelope me-1"></i> Contact </a> </li> {% if user.is_authenticated %} <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <i class="fa-solid fa-user me-1"></i> {{ user.username }} </a> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="{% url 'profile' %}"><i class="bi bi-person-circle me-2"></i>Profile</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="{% url 'logout' %}"><i class="bi bi-box-arrow-right me-2"></i>Logout</a></li> </ul> </li> {% else %} <li class="nav-item"> <a class="nav-link {% if request.resolver_match.url_name == 'login' %}active{% endif %}" href="{% url 'login' %}"> <i class="fa-solid fa-right-to-bracket me-1"></i> Login </a> </li> <li class="nav-item"> <a class="nav-link {% if request.resolver_match.url_name == 'register' %}active{% endif %}" href="{% url 'register' %}"> <i class="fa-solid fa-user-plus me-1"></i> Register </a> </li> {% endif %} </ul> </div> </div> </nav> <!-- Django Messages --> <div class="alert-container"> {% if messages %} {% for message in messages %} <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert"> {{ message }} <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div> {% endfor %} {% endif %} </div> <!-- Main Content --> <main class="py-4"> <div class="container"> {% block content %}{% endblock %} </div> </main> <!-- Footer --> <footer class="bg-dark text-white py-4 mt-4"> <div class="container"> <div class="row"> <div class="col-md-4"> <h5>My Django Site</h5> <p>A practical example of Django templates with modern styling and components.</p> </div> <div class="col-md-4"> <h5>Quick Links</h5> <ul class="list-unstyled"> <li><a href="{% url 'home' %}" class="text-white text-decoration-none"><i class="bi bi-chevron-right me-1"></i>Home</a></li> <li><a href="{% url 'about' %}" class="text-white text-decoration-none"><i class="bi bi-chevron-right me-1"></i>About</a></li> <li><a href="{% url 'contact' %}" class="text-white text-decoration-none"><i class="bi bi-chevron-right me-1"></i>Contact</a></li> </ul> </div> <div class="col-md-4"> <h5>Connect With Us</h5> <div class="d-flex gap-3 fs-4"> <a href="#" class="text-white"><i class="fab fa-facebook"></i></a> <a href="#" class="text-white"><i class="fab fa-twitter"></i></a> <a href="#" class="text-white"><i class="fab fa-instagram"></i></a> <a href="#" class="text-white"><i class="fab fa-linkedin"></i></a> <a href="#" class="text-white"><i class="fab fa-github"></i></a> </div> </div> </div> <hr> <div class="text-center"> <p class="mb-0">© {% now "Y" %} My Django Site. All rights reserved.</p> </div> </div> </footer> <!-- Bootstrap 5.3 JS Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <!-- Custom JavaScript --> <script> // Auto-dismiss Django messages after 5 seconds document.addEventListener('DOMContentLoaded', function() { setTimeout(function() { const alerts = document.querySelectorAll('.alert'); alerts.forEach(function(alert) { const bsAlert = new bootstrap.Alert(alert); bsAlert.close(); }); }, 5000); }); </script> {% block extra_js %}{% endblock %} </body> </html>
Now, let's create the three pages that will extend our base template:
home.html Template
{% extends 'base.html' %} {% block title %}Home | My Django Site{% endblock %} {% block content %} <div class="px-4 py-5 my-5 text-center"> <h1 class="display-5 fw-bold text-body-emphasis">Welcome to My Django Site</h1> <div class="col-lg-6 mx-auto"> <p class="lead mb-4"> This is a sample home page built with Django templates and Bootstrap 5.3. Explore our site to learn more about what we do and how to contact us. </p> <div class="d-grid gap-2 d-sm-flex justify-content-sm-center"> <a href="{% url 'about' %}" class="btn btn-primary btn-lg px-4 gap-3"> <i class="bi bi-info-circle me-2"></i>Learn More </a> <a href="{% url 'contact' %}" class="btn btn-outline-secondary btn-lg px-4"> <i class="bi bi-envelope me-2"></i>Contact Us </a> </div> </div> </div> <div class="container px-4 py-5"> <h2 class="pb-2 border-bottom">Featured Content</h2> <div class="row g-4 py-5 row-cols-1 row-cols-lg-3"> <div class="col d-flex align-items-start"> <div class="icon-square text-body-emphasis bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3 p-3 rounded"> <i class="bi bi-gear-fill"></i> </div> <div> <h3 class="fs-2 text-body-emphasis">Feature One</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <a href="#" class="btn btn-primary">Learn more</a> </div> </div> <div class="col d-flex align-items-start"> <div class="icon-square text-body-emphasis bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3 p-3 rounded"> <i class="bi bi-speedometer"></i> </div> <div> <h3 class="fs-2 text-body-emphasis">Feature Two</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <a href="#" class="btn btn-primary">Learn more</a> </div> </div> <div class="col d-flex align-items-start"> <div class="icon-square text-body-emphasis bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3 p-3 rounded"> <i class="bi bi-graph-up"></i> </div> <div> <h3 class="fs-2 text-body-emphasis">Feature Three</h3> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <a href="#" class="btn btn-primary">Learn more</a> </div> </div> </div> </div> {% endblock %}
about.html Template
{% extends 'base.html' %} {% block title %}About | My Django Site{% endblock %} {% block content %} <div class="row"> <div class="col-lg-8"> <h1 class="mb-4">About Us</h1> <p class="lead"> We're dedicated to demonstrating the power and flexibility of Django templates. </p> <p> Django's template system is a powerful tool that allows developers to create dynamic HTML pages with minimal effort. Templates provide a way to separate the design from the Python code, making your projects more maintainable and easier to develop. </p> <h2 class="mt-5">Our Mission</h2> <p> Our mission is to help Django developers create beautiful, functional websites using modern tools and best practices. We believe that a good template system is essential for rapid development and maintaining clean code. </p> <h2 class="mt-5">Our Team</h2> <div class="row mt-4"> <div class="col-md-4 mb-4"> <div class="card h-100"> <div class="card-body text-center"> <i class="bi bi-person-circle fs-1 text-primary mb-3"></i> <h5 class="card-title">Jane Doe</h5> <p class="card-text text-muted">Founder & Lead Developer</p> <p class="card-text">Django enthusiast with 8+ years of experience in web development.</p> </div> </div> </div> <div class="col-md-4 mb-4"> <div class="card h-100"> <div class="card-body text-center"> <i class="bi bi-person-circle fs-1 text-primary mb-3"></i> <h5 class="card-title">John Smith</h5> <p class="card-text text-muted">Frontend Developer</p> <p class="card-text">Bootstrap expert who loves creating responsive and beautiful interfaces.</p> </div> </div> </div> <div class="col-md-4 mb-4"> <div class="card h-100"> <div class="card-body text-center"> <i class="bi bi-person-circle fs-1 text-primary mb-3"></i> <h5 class="card-title">Sarah Johnson</h5> <p class="card-text text-muted">UX Designer</p> <p class="card-text">Creates user-friendly designs with a focus on accessibility and usability.</p> </div> </div> </div> </div> </div> <div class="col-lg-4"> <div class="card mb-4"> <div class="card-header bg-primary text-white"> <h5 class="card-title mb-0">Quick Facts</h5> </div> <div class="card-body"> <ul class="list-group list-group-flush"> <li class="list-group-item d-flex justify-content-between align-items-center"> Founded <span class="badge bg-primary rounded-pill">2022</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Team Members <span class="badge bg-primary rounded-pill">12</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Projects Completed <span class="badge bg-primary rounded-pill">75+</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Happy Clients <span class="badge bg-primary rounded-pill">100+</span> </li> </ul> </div> </div> <div class="card"> <div class="card-header bg-primary text-white"> <h5 class="card-title mb-0">Technologies We Use</h5> </div> <div class="card-body"> <div class="d-flex flex-wrap gap-2"> <span class="badge bg-secondary">Django</span> <span class="badge bg-secondary">Python</span> <span class="badge bg-secondary">Bootstrap 5</span> <span class="badge bg-secondary">JavaScript</span> <span class="badge bg-secondary">HTML5</span> <span class="badge bg-secondary">CSS3</span> <span class="badge bg-secondary">PostgreSQL</span> <span class="badge bg-secondary">AWS</span> <span class="badge bg-secondary">Docker</span> <span class="badge bg-secondary">Git</span> </div> </div> </div> </div> </div> {% endblock %}
contact.html Template
{% extends 'base.html' %} {% block title %}Contact | My Django Site{% endblock %} {% block content %} <div class="row"> <div class="col-lg-8"> <h1 class="mb-4">Contact Us</h1> <p class="lead">Have questions or suggestions? We'd love to hear from you!</p> <form method="post" class="mt-4"> {% csrf_token %} <div class="row g-3"> <div class="col-md-6"> <label for="name" class="form-label">Your Name</label> <div class="input-group"> <span class="input-group-text"><i class="bi bi-person"></i></span> <input type="text" class="form-control" id="name" name="name" required> </div> </div> <div class="col-md-6"> <label for="email" class="form-label">Email Address</label> <div class="input-group"> <span class="input-group-text"><i class="bi bi-envelope"></i></span> <input type="email" class="form-control" id="email" name="email" required> </div> </div> <div class="col-12"> <label for="subject" class="form-label">Subject</label> <div class="input-group"> <span class="input-group-text"><i class="bi bi-chat-square-text"></i></span> <input type="text" class="form-control" id="subject" name="subject" required> </div> </div> <div class="col-12"> <label for="message" class="form-label">Message</label> <div class="input-group"> <span class="input-group-text"><i class="bi bi-pencil"></i></span> <textarea class="form-control" id="message" name="message" rows="6" required></textarea> </div> </div> <div class="col-12"> <button type="submit" class="btn btn-primary"> <i class="bi bi-send me-2"></i>Send Message </button> </div> </div> </form> </div> <div class="col-lg-4"> <div class="card mb-4"> <div class="card-header bg-primary text-white"> <h5 class="card-title mb-0">Contact Information</h5> </div> <div class="card-body"> <ul class="list-unstyled mb-0"> <li class="mb-3"> <i class="bi bi-geo-alt-fill text-primary me-2"></i> 123 Django Street, Web City, 94000 </li> <li class="mb-3"> <i class="bi bi-telephone-fill text-primary me-2"></i> +1 (555) 123-4567 </li> <li class="mb-3"> <i class="bi bi-envelope-fill text-primary me-2"></i> info@mydjangosite.com </li> <li> <i class="bi bi-clock-fill text-primary me-2"></i> Monday - Friday: 9:00 AM - 5:00 PM </li> </ul> </div> </div> <div class="card"> <div class="card-header bg-primary text-white"> <h5 class="card-title mb-0">Follow Us</h5> </div> <div class="card-body"> <div class="d-flex justify-content-center gap-3 fs-3"> <a href="#" class="text-primary"><i class="fab fa-facebook"></i></a> <a href="#" class="text-info"><i class="fab fa-twitter"></i></a> <a href="#" class="text-danger"><i class="fab fa-instagram"></i></a> <a href="#" class="text-primary"><i class="fab fa-linkedin"></i></a> <a href="#" class="text-dark"><i class="fab fa-github"></i></a> </div> </div> </div> </div> </div> {% endblock %}
Understanding the Base Template Structure
Our base.html template serves as the foundation for all pages in our Django application. Let's break down its key components:
External Resources
- Bootstrap 5.3: Provides responsive design and pre-styled components
- Bootstrap Icons: A collection of free, high-quality SVG icons
- Font Awesome: An extensive icon library with various styles
- Google Fonts: Custom web fonts (Roboto for body text and Playfair Display for headings)
Template Structure
- Head Section: Contains metadata, title block, and all necessary style resources
- Body Structure: Organized into three main sections:
- Responsive navbar with mobile toggle
- Main content area (within a container)
- Footer with multiple columns and social links
- Block Tags: Strategic placement of Django template blocks allows child templates to extend and override specific sections
Responsive Design Features
- The navbar collapses into a hamburger menu on smaller screens
- The footer uses Bootstrap's grid system to stack columns on mobile
- Content maintains proper spacing and alignment across device sizes
Django-Specific Features
- Active Link Highlighting: Uses request.resolver_match.url_name to highlight the current page in the navigation
- User Authentication Checks: Different navigation options appear based on the user's authentication status
- Django Messages Framework: Messages appear as dismissible alerts that automatically disappear after 5 seconds
- Dynamic Year: Uses {% now "Y" %} to display the current year in the copyright
Child Templates
Each child template (home.html, about.html, and contact.html) follows these principles:
- Extends the Base: Each starts with {% extends 'base.html' %} to inherit the base structure
- Custom Title: Sets a unique page title using the title block
- Page Content: Fills the content block with page-specific HTML
- Consistent Styling: Maintains visual consistency while showcasing different Bootstrap components
Implementing This in Your Django Project
To use these templates in your Django project:
- Create a templates directory in your Django app or project root
- Save the template files in the appropriate directory structure
- Ensure your Django settings include the templates directory:
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR / 'templates'], 'APP_DIRS': True, # ... }, ]
- Create view functions that render these templates:
def home(request): return render(request, 'home.html') def about(request): return render(request, 'about.html') def contact(request): if request.method == 'POST': # Process form data messages.success(request, 'Your message has been sent successfully!') return redirect('contact') return render(request, 'contact.html')
- Define URL patterns in your urls.py:
urlpatterns = [ path('', views.home, name='home'), path('about/', views.about, name='about'), path('contact/', views.contact, name='contact'), # Add other URLs... ]
Conclusion
Django templates provide a powerful way to create dynamic, responsive web pages while maintaining a clean separation between your Python code and HTML presentation. With the base template approach demonstrated here, you can easily create a consistent look and feel across your entire application while leveraging modern frontend frameworks like Bootstrap 5.3.
The template system's inheritance model allows you to avoid repetition and focus on what makes each page unique. Combined with Django's built-in features like the messages framework and user authentication, you can quickly build professional, feature-rich web applications.