helloflask / bootstrap-flask

Bootstrap 4 & 5 helper for your Flask projects.
https://bootstrap-flask.readthedocs.io
Other
1.12k stars 190 forks source link

Doesn't catch bootstrap.css and/or styles.css - The solution #213

Closed molinaangeldavid closed 2 years ago

molinaangeldavid commented 2 years ago

In this occassion. I replaced the {{ bootstrap.load_css }} and changed it for the css link styles from the stylesheets bootstrap. Just this way could catch the bootstrap styles and my own css styles. Please view this issue. Thanks

So I write the right code below here:

< head >
    {% block head %}
    meta...
    {% block styles %}
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link rel="stylesheet" href=" {{ url_for('static', filename= 'css/styles.css') }} ">
    {% endblock %}
    {% endblock %}
< /head >

<body...

greyli commented 2 years ago

What's your actual issue?

molinaangeldavid commented 2 years ago

Following the documentation of bootstrap_flask. I like make a page include the bootstrap styles {{ bootstrap.load_css() }} and my own styles styles.css using the macro render_static() macro The issue is that when put the bootstrap.load_css and the styles.css inside the block styles doesn't work. But work if I put the link tag from default

molinaangeldavid commented 2 years ago
{% from 'bootstrap5/utils.html'  import render_static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    {% block styles %}
    {{ bootstrap.load_css() }}
    {{ render_static('css','styles.css') }}
    {% endblock %}
</head>
greyli commented 2 years ago

render_static takes two arguments, the first is the type of the static file (css), the second is the path of the file (it should be css/styles.css instead of style.css in your case).

molinaangeldavid commented 2 years ago

Doesn't work yet. I test every way to catch the css styles but there no reponse. Thanks anyway

yuxiaoy1 commented 2 years ago

Try reloading your app first, and see what's being rendered in the html code of the render_static macro.