Flask - Bootstrap in base.html

up vote
0
down vote

favorite

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?

asked Nov 13 at 17:55

Frendom

266

add a comment |

up vote
0
down vote

favorite

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?

asked Nov 13 at 17:55

Frendom

266

add a comment |

up vote
0
down vote

favorite

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?

asked Nov 13 at 17:55

Frendom

266

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?

python flask flask-bootstrap

asked Nov 13 at 17:55

Frendom

266

asked Nov 13 at 17:55

Frendom

266

asked Nov 13 at 17:55

Frendom

266

asked Nov 13 at 17:55

Frendom

266

asked Nov 13 at 17:55

Frendom

266

add a comment |

2 Answers
2

active

oldest

votes

up vote
0
down vote

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

answered Nov 13 at 18:14

Paul

114

add a comment |

up vote
0
down vote

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.)

answered Nov 14 at 10:10

Tobin

1848

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53286914%2fflask-bootstrap-in-base-html%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
0
down vote

answered Nov 13 at 18:14

Paul

114

add a comment |

up vote
0
down vote

answered Nov 13 at 18:14

Paul

114

add a comment |

up vote
0
down vote

answered Nov 13 at 18:14

Paul

114

answered Nov 13 at 18:14

Paul

114

answered Nov 13 at 18:14

Paul

114

answered Nov 13 at 18:14

Paul

114

answered Nov 13 at 18:14

Paul

114

add a comment |

up vote
0
down vote

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.)

answered Nov 14 at 10:10

Tobin

1848

add a comment |

up vote
0
down vote

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.)

answered Nov 14 at 10:10

Tobin

1848

add a comment |

up vote
0
down vote

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.)

answered Nov 14 at 10:10

Tobin

1848

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.)

answered Nov 14 at 10:10

Tobin

1848

answered Nov 14 at 10:10

Tobin

1848

answered Nov 14 at 10:10

Tobin

1848

answered Nov 14 at 10:10

Tobin

1848

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky