Flask - Bootstrap in base.html

Question

Flask - Bootstrap in base.html

6.7k Views Asked by Frendom At 19 April 2025 at 11:05

I want to add Bootstrap to my website. I have base.html and other files, which inherit from base.html, but in my base.html I want to have navbar, which will be displayed on every site. Unfortunately, after adding some bootstrap code, it''s no displayed, but if I add this code to index.html, it will be displayed.

My base.html:

{% extends "bootstrap/base.html" %}
{% block head %}
    {{ super() }}
    {% if title %}
    <title> {{ title }} - Book Blog</title>
    {% else %}
    <title> Welcome to Book Blog!</title>
    {% endif %}
{% endblock %}

{% block navbar %}
Microblog: 
    <ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="{{ url_for('index') }}">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ url_for('show_books') }}">Books</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ url_for('login') }}">Login</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ url_for('logout') }}">Logout</a>
    </li>
</ul>
{% endblock %}

<body>

<hr>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
    {% for message in messages %}
    <li>{{ message }}</li>
    {% endfor %}
</ul>
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</body>

So in this case the, the navbar isnt displayed. And as I wrote above, if I add nav classes to index.html, navbar displays only on this site. How can i fix it?

Original Q&A

There are 2 best solutions below

**Tobin** · Answer 1

The problem probably comes from your index.html page. In principle, your index page must inherit from the base.html template. What should give this:

{% extends "base.html" %}
{% block title %}Welcome to Book Blog!{% endblock %}

{% block content %}
    <div>
        <h1>Your content</h1>
    </div>
{% endblock %}

Your template base.html can change slightly too:

{% extends "bootstrap/base.html" %}
{% block head %}
    {{ super() }}
    {% if title %}
        <title> {{ title }} - Book Blog</title>
    {% else %}
        <title> Welcome to Book Blog!</title>
    {% endif %}
{% endblock %}

{% block body %}
<body>

{% block navbar %}
Microblog: 
<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="{{ url_for('index') }}">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ url_for('show_books') }}">Books</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ url_for('login') }}">Login</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ url_for('logout') }}">Logout</a>
    </li>
</ul>
{% endblock %}

    <hr>
    {% with messages = get_flashed_messages() %}
        {% if messages %}
            <ul>
                {% for message in messages %}
                    <li>{{ message }}</li>
                {% endfor %}
           </ul>
       {% endif %}
    {% endwith %}
    {% block content %}{% endblock %}
</body>
{% endblock %}

I added a block tag to the body tag of your template. Now you should inherit this template in all pages where you want to have the same structure (navbar, etc.)

**Paul** · Answer 2

You probably need to import the Bootstrap Libs (Js, Css) on every page. I would recommend writing a <title></title> file you can import in every page. The same goes with the attribute: Write a file for the Navbar and import it in the "Base Html" whenever you need the navbar. Hopefully, I could help

Flask - Bootstrap in base.html

There are 2 best solutions below

Related Questions in PYTHON

Related Questions in FLASK

Related Questions in FLASK-BOOTSTRAP

Trending Questions

Popular # Hahtags

Popular Questions