Django base template (using bootstrap3) overwrites index.html completely

Question

I've created a base.html file where I want my bootstrap3 navbar and footer to live. These will be used on every page of my site.

However, the base.html & corresponding css file that goes with it seems to overwrite all of the index.html file and specific css for that view.

I've read the django documentation and closely-related questions like this one on overriding the base template. Other website have tutorials but still aren't making sense. I believe I am misunderstanding something fundamental.

Here is the code:

base.html:

<!DOCTYPE html> {% load staticfiles %}
<html>
<head>
    <link rel="stylesheet" href="/static/css/main.css" />
    <!-- jquery -->
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <!-- [/] jquery -->
</head>
<body>
    {# Load the tag library #} {% load bootstrap3 %} {# Load CSS and JavaScript #} {% bootstrap_css %} {% bootstrap_javascript %} {# Display django.contrib.messages as Bootstrap alerts #} {% bootstrap_messages %} {# Navigation Menu #}
    <header>
        <nav class="navbar navbar-default">
            ----->Navbar code here<-----
        </nav>
    </header>
    <footer>
        <div class="container">
            <p>Good stuff is here in the footer</p>
        </div>
    </footer>
</body>
</html>

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="description" content="Online community">
    <meta name="author" content="My name">
    <title>Planet</title>
    <link href="/static/css/homepage.css" rel="stylesheet">
</head>
<body>
    {% extends 'base.html' %}
    {% block content %}
    <p>WORDS WORDS WORDS WORDS</p>
    <h1>HERE ARE SOME BIG WORDS ON THE MAIN PAGE</h1>
{% endblock content %}
</body>
</html>

I can include the css files for index.html & base.html if it helps but I believe the problem lies somewhere with my understanding of extending the base template and how to use {% block content %}. I can remove that block and it doesn't seem to matter either.

Thank you for any insights you can provide.

what is your question? its not very clear to me what you are trying to do, nor what is actually happening that you are not expecting... also seeing the view function would potentially be helpful — Joran Beasley
– Joran Beasley, Commented Jun 8, 2017 at 18:07
These templates don't make any sense. Why do you have the HTML declaration and the head in both files? Why do you have the extends tag in the middle of the template - that's not even allowed and should raise an error. Are you actually rendering index.html at all? — Daniel Roseman
– Daniel Roseman, Commented Jun 8, 2017 at 18:11

MrAlexBailey · Accepted Answer · 2017-06-08 18:22:05Z

3

It looks like you're trying to use template extending

In simplicity, you should structure your files like so:

base.html

<head> </head>

<body>
{% block content %}
    index.html will be loaded and everything within
    the block named "content" will display here
{% endblock %}
</body>

<footer> </footer>

index.html

{% extends 'base.html' %}

{% block content %}
    Everything within this block, named "content", will 
    be inserted into the "content" block of base.html
{% endblock %}

Your combined HTML would look like this once it passes through Django's templating system:

<head> </head>
<body>
    Everything within this block, named "content", will 
    be inserted into the "content" block of base.html
</body>
<footer> </footer>

Your view will need to return the rendered index.html. This system is designed such that you can continue to use base.html with other templates to maintain a standard structure or page design, while modifying only the content on those pages with different versions of index.html.

edited Jun 8, 2017 at 18:22

answered Jun 8, 2017 at 18:12

MrAlexBailey

5,2891 gold badge22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PolishZeus Over a year ago

Thank you for this info! So my navbar will live in base.html and I need to change my mindset and have other pages (index, login pages, etc.) all be inserted into the base.html document using {% block name} elements. I had been thinking about this backwards. Thank you again!

Collectives™ on Stack Overflow

Django base template (using bootstrap3) overwrites index.html completely

base.html:

index.html:

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

base.html:

index.html:

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related