CSS not loading in with bootstrap

Question

Html

    <!DOCTYPE html>
    <html>
    <head>
        {%if title%}
        <title>Forum- {{title}}</title>
        {%else%}
        <title>Forum</title>
        {%endif%}
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

            <!-- Bootstrap CSS -->
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
            <link rel="stylesheet" type="text/css" href="./Form.css">
            <title>Blog</title>
        </head>
        <body>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </head>
    <body>

    <nav class = "navbar navbar-expand bg-dark">
            <a class = "nav-item nav-link colora"  href="#">Home</a>
            <a class ="nav-item nav-link"  href="#">Posts</a>
    </nav>
    <div class = "container">
        {% block content %}{% endblock %}
    </div>

CSS

.colora a,.colora a:visited {
    color: rgb(255, 255, 250);
    text-decoration: none;
}

I'm trying to make the inside of the color white with the CSS file, unfortunately it doesn't seem to want to change even though I have specified it which should override the bootstrap. Thanks for taking your time to look at this problem!

Are you sure everything loaded correctly? Have you tried clearing your cache? — Felix G
– Felix G, Commented Apr 17, 2020 at 23:53

AhmerMH · Accepted Answer · 2020-04-18 10:24:52Z

1

Use !important attribute to override bootstrap. Also you have added the anchor tag wrong in css. The colora class is applied to anchor tag. However, your CSS denotes that find anchor tag inside colora class which is not present. Remove the anchor from the css and it will work. Below is your working code example.

.colora,.colora:visited {
    color: #fff !important;
    text-decoration: none !important;
}

 <!DOCTYPE html>
    <html>
    <head> 
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

            <!-- Bootstrap CSS -->
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
            <link rel="stylesheet" type="text/css" href="./Form.css">
            <title>Blog</title>
             
        </head>
        <body>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </head>
    <body>

    <nav class = "navbar navbar-expand bg-dark">
            <a class = "nav-item nav-link colora"  href="#">Home</a>
            <a class ="nav-item nav-link colora"  href="#">Posts</a>
    </nav>
    <div class = "container">
        container 
    </div>

edited Apr 18, 2020 at 10:24

answered Apr 17, 2020 at 23:56

AhmerMH

6887 silver badges18 bronze badges

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

8 Comments

Matthew Lee Over a year ago

Tried that before, didn't work. I don't think the problem is the CSS itself but it being not detected.

AhmerMH Over a year ago

In which file are you adding that code. Also inspect element and check whether the css has been applied or not. If not, you are adding the style in wrong file.

Matthew Lee Over a year ago

I am doing that in the css file, but the element is not applied.

AhmerMH Over a year ago

The thing is it may have been applied. However, the css file on your local is loaded first and bootstrap afterwards (due to cdn). In that case, bootstrap overrides the css. Also as pointed out by @Rob, please try the correct classname with !important attribute.

Matthew Lee Over a year ago

How can I load css after bootstrap?

|

Rob Moll · Accepted Answer · 2020-04-18 00:10:03Z

0

Your css is referencing an a element that is the child of an element with a class of colora. There is no such element.

I think you want

a.colora,a.colora:visited {

but I can only guess.

a.colora,a.colora:visited {
    color: rgb(255, 255, 250);
    text-decoration: none;
}

<!DOCTYPE html>
    <html>
    <head>
        {%if title%}
        <title>Forum- {{title}}</title>
        {%else%}
        <title>Forum</title>
        {%endif%}
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

            <!-- Bootstrap CSS -->
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
            <link rel="stylesheet" type="text/css" href="./Form.css">
            <title>Blog</title>
        </head>
        <body>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </head>
    <body>

    <nav class = "navbar navbar-expand bg-dark">
            <a class = "nav-item nav-link colora"  href="#">Home</a>
            <a class ="nav-item nav-link"  href="#">Posts</a>
    </nav>
    <div class = "container">
        {% block content %}{% endblock %}
    </div>

edited Apr 18, 2020 at 0:10

answered Apr 17, 2020 at 23:58

Rob Moll

3,4732 gold badges12 silver badges15 bronze badges

2 Comments

Matthew Lee Over a year ago

Thats a mistake that I made, but I don't think the class is what was causing it. As I have tried to use ids to debug yet it didn't work.

Rob Moll Over a year ago

@MLee Please check the snippet. Is that what you are looking for?

Matthew Lee · Accepted Answer · 2020-04-18 02:48:20Z



<!DOCTYPE html>
<html>

<head>

    <title>Forum- home</title>

    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="static/stylesheets/style.css">
    <title>Blog</title>
</head>

<body>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>


    <nav class="navbar navbar-expand bg-dark">
        <a class="nav-item nav-link colora" href="#">Home</a>
        <a class="nav-item nav-link" href="#">Posts</a>
    </nav>
    <div class="container">


        <h1>Blog 1</h1>
        <p>By Matthew Lee on April 20, 2018</p>
        <p>First Post</p>


    </div>
</body>

Got it working, the problem was apparently I needed to rename the static which I named template, to static. Also I had to specify the file location instead of using the url_for method. Don't know why it worked but that would be the finalized code.

Collectives™ on Stack Overflow

CSS not loading in with bootstrap

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related