External CSS file do not work in bootstrap

Question

I am making a web app in flask and use bootstrap for my front end. The external CSS file is located on /static of the application. The problem is the properties in the external CSS do not apply to the elements.

form.html

<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

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

form.html

<div class="jumbotron">
    <div class= "container">
        <h1>Application</h1>
    </div>  
</div>

style.css

.jumbotron {
    background-color: #191970;
    height: 100px;  
}

Do you see any errors in your browser console?

DavidG
– DavidG

2017-03-09 23:44:11 +00:00
Commented Mar 9, 2017 at 23:44 — DavidG
– DavidG, Commented Mar 9, 2017 at 23:44
@DavidG No, no errors on the browser console!

Pooneh
– Pooneh

2017-03-09 23:54:51 +00:00
Commented Mar 9, 2017 at 23:54 — Pooneh
– Pooneh, Commented Mar 9, 2017 at 23:54

Community · Accepted Answer · 2017-05-23 12:10:19Z

0

(I can't comment yet so...) From Configuring Flask to correctly load Bootstrap js and css files

Try using:

<link href="{{ url_for('static', filename='scripts/bootstrap/dist/css/bootstrap.css') }}" rel="stylesheet">

The pattern they said here is:

{{ url_for('static', filename='path/inside/the/static/directory') }}

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Mar 9, 2017 at 23:45

user6137845

Sign up to request clarification or add additional context in comments.

Comments

piezzoritro · Accepted Answer · 2017-03-11 22:44:19Z

Try solving in this way:

<head>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

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

</head>

assuming you have a folder "stylesheets" located inside the static folder, which contains the file style.css

Collectives™ on Stack Overflow

External CSS file do not work in bootstrap

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related