Adjust bootstrap within jinja template (Flask Framework)

Question

I would like to adjust default bootstrap class formatting within jinja template. The only thing, what I want to do, is to change the color of the h1 element. But unfortunately, it is still black.

I am using flask and render_template module.

I have following code in template:

{% extends "bootstrap/base.html" %}
{% block head %}
{{ super() }}
<link rel="stylesheet" type="text/css" href="bootstrap_adjust.css">

{% endblock %}

{% block content %}
    <div class="container">
    <div class="page-header">
        <h1>Hello, Vaclav!</h1>
     </div>
</div>
{% endblock %}

boostrap_adjust.css looks like this:

h1{
    color:blue;
}

Thank you for any advice!

Vaclav

Answer 1

I ll try to answer the question "how to adjust an element using a.css file instead of styling it directly?"

Go in your base.html file, ie the file you extend from, and in the header tag, at the end of all the other stylesheets create a Jinja2 block like so

{% block stylesheets %}
{% endblock stylesheets %}

Second step would be to call this block in your child templates and pass your.css files in there instead of passing it in the head block.

{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="bootstrap_adjust.css">
{% endblock stylesheets %}

Give it a try and let us know!

Answer 2

I finally found working solution here:

https://stackoverflow.com/questions/34664156/flask-bootstrap-custom-theme

So in my case this works:

{% block styles %}
{{ super() }}

<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='bootstrap_adjust.css')}}">

{% endblock %}

.css file is placed in the folder static. But be careful, static is not part of the path in filename parameter, because url_for('static') looks automatically in this folder.

Thank you all for your willing to help!

Answer 3

Adding a custom CSS file:

{% block styles %}
{{super()}}
<link rel="stylesheet"
href="{{url_for('.static', filename='mystyle.css')}}">
{% endblock %}

Please Read the documentation on Flask-Bootstrap and have a good understanding of super classes.

This is the Link - Flask-Bootstrap