2

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

Vaclav Vlcek
  • 317
  • 1
  • 6
  • 17
  • A trick, if that's the only thing you want to change, is `

    Hello, Vaclav!

    `     – netlemon Jul 11 '20 at 14:42
  • Yes, thank you for your comment. That is how I solved that for now, but I would like to learn how to adjust that with external css. – Vaclav Vlcek Jul 11 '20 at 15:21
  • Give an id to `h1` element. Then change the color using that id. That way you will override default settings of bootstrap. Also you could use `!important` – CaffeinatedCod3r Jul 11 '20 at 15:51

3 Answers3

1

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!

Vaclav Vlcek
  • 317
  • 1
  • 6
  • 17
0

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, i.e. 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!

netlemon
  • 964
  • 8
  • 22
  • Hi, thank you for your advice. I tried that exactly as you wrote, but it doesn't work unfortunately. I just found this thread and it works: https://stackoverflow.com/questions/34664156/flask-bootstrap-custom-theme – Vaclav Vlcek Jul 11 '20 at 17:41
0

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

Orawusi Timi
  • 1