Contents
Template Inheritance Common Header and Footer Static Files Bootstrap Integration Passing Data to Templates Quick Revision Assignment

Session Overview

  • Template Inheritance
  • Common Header and Footer
  • Static Files
  • Bootstrap Integration
  • Passing Data to Templates

Template Inheritance

Template Inheritance allows multiple pages to share a common layout.

Instead of repeating the same HTML code on every page, we create one base template and reuse it.

Problem Without Template Inheritance

Suppose we have Home, About and Contact pages. Each page contains the same Header, Navigation Menu and Footer.

If we update the menu, we must modify every page individually.

Solution

Create a common template and let other pages inherit from it.

Advantage: Write common layout once and reuse it across the entire website.

Common Header and Footer

We will create a common layout file named base.html.

File Location
demo/templates/base.html
base.html
<html>

<head>
    <title>My Website</title>
</head>

<body>

    <header>
        <h1>My Django Website</h1>

        <a href="/">Home</a>
        <a href="/about/">About</a>
        <a href="/contact/">Contact</a>
    </header>

    <hr>

    {% block content %}
    {% endblock %}

    <hr>

    <footer>
        Copyright © 2026
    </footer>

</body>

</html>
Update home.html
{% extends 'base.html' %}

{% block content %}

<h2>Home Page</h2>

<p>Welcome to Django.</p>

{% endblock %}
Update about.html
{% extends 'base.html' %}

{% block content %}

<h2>About Page</h2>

<p>About Us.</p>

{% endblock %}
Understanding block content

The tags {% block content %} and {% endblock %} act like a placeholder area in the base template.

Any HTML code written between these tags will be inserted into the content section of base.html. 

{% block content %}

<h2>Home Page</h2>

<p>Welcome to Django.</p>

{% endblock %}

Think of it as a start tag and end tag that define the page-specific content area.

Static Files

Static files are files that do not change, such as CSS, JavaScript and Images.

Django provides a special folder structure to manage static files.

Project Structure
demo
│
├── templates
│   ├── base.html
│   ├── home.html
│
├── static
│   ├── css
│   │   └── style.css
│   │
│   ├── js
│   │   └── script.js
│   │
│   └── images
│
└── views.py
Step 1 - Create CSS File
demo/static/css/style.css
body{
    background-color:#f8f9fa;
}

h1{
    color:blue;
}
Step 2 - Load Static Library

Add the following line at the top of base.html

{% load static %}
Step 3 - Link CSS File
<link rel="stylesheet"
href="{% static 'css/style.css' %}">
Note: Django cannot directly understand static file paths. Therefore, we must use: 
{% load static %}
and 
{% static 'path' %}
to access CSS, JavaScript and Images.
Result: The CSS file is now available across all pages because it is linked in base.html.

Bootstrap Integration

Bootstrap helps us create responsive and professional websites quickly.

We will add Bootstrap in base.html so all pages can use Bootstrap classes.

File Location
demo/templates/base.html
Add Bootstrap CSS
<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">

</head>
Add Bootstrap JS
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
Example : home.html
{% extends 'base.html' %}

{% block content %}

<div class="container mt-5">

    <h1 class="text-primary">
        Welcome To Django
    </h1>

    <button class="btn btn-success">
        Learn More
    </button>

</div>

{% endblock %}
Result: Bootstrap classes can now be used on every page without adding the Bootstrap CDN again.

Passing Data to Templates

Django allows us to send data from a View to an HTML page.

This data can then be displayed inside the template.

Step 1 - Update View
from django.shortcuts import render

def home(request):

    data = {
        'name':'Shree'
    }

    return render(request,'home.html',data)
Step 2 - Display Data in Template
{% extends 'base.html' %}

{% block content %}

<h2>Welcome {{ name }}</h2>

{% endblock %}
Result: Django replaces: 
{{ name }}
with the value received from the View and displays: 
Welcome Shree

Quick Revision

Template Inheritance
  • base.html
  • extends
  • Reusable Layout
Block Content
  • Page Specific Content
  • block content
  • endblock
Static Files
  • CSS
  • JavaScript
  • Images
Static Tags
  • load static
  • static path
  • Link Resources
Bootstrap
  • CDN
  • Responsive Design
  • Reusable Components
Template Variables
  • {{ variable }}
  • Dictionary Data
  • Dynamic Content

Assignment

Complete the following tasks:
  1. Create a base.html file with Header, Navigation Menu and Footer.
  2. Create three pages: Home, About and Services.
  3. Use Template Inheritance so all pages share the same layout.
  4. Create a CSS file inside the static folder and apply styles to the Header and Footer.
  5. Pass the following data from a View to a Template and display it on the page: 
    {
    'name':'Shree',
    'city':'Pune',
    'course':'Python Django'
}