Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Custom CSS not overriding bootstrap

I have set my head section up like so;

    <head>
        {% block head %}
            <meta charset="UTF-8">
            <title>{% block title %}{% endblock %}</title>
            <!-- Latest compiled and minified CSS -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
            <link rel="stylesheet" type="text/css" href="css/normalize.css" />
            <link rel="stylesheet" type="text/css" href="css/style.css" />
            <link rel="stylesheet" type="text/css" href="css/custom.css" />
            <link rel="stylesheet" type="text/css" href="css/responsive.css" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        {% endblock %}
    </head>

but each time I try an either add a custom class, or try to override the bootstrap css it doesn't do anything. Am I doing something wrong?

Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

No problem. Thanks for the help.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Mayur,

Unrelated to your problem but you should have your normalize file first and then let the others override it.

What selectors are you using? You didn't give any examples.

If you match the selector that bootstrap is using then you should be able to override the styles.

You can use your browsers dev tools to see what selector is being used.

2 Answers

Ryan Rankin
Ryan Rankin
8,261 Points
Ryan Rankin
Ryan Rankin
8,261 Points

Try adding the bootstrap style link after your custom css links.

Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Hi Ryan Rankin I thought that this won't work because of CSS rules, as in Cascading sheets?

Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Just tried it, as I thought it doesn't work unfortunately.

Ryan Rankin
Ryan Rankin
8,261 Points

Sorry about that. It was the only thing I cold think of. Good luck.

Millan Singh
seal-mask
.a{fill-rule:evenodd;}techdegree
Millan Singh
Full Stack JavaScript Techdegree Student 8,392 Points
Millan Singh
.a{fill-rule:evenodd;}techdegree
Millan Singh
Full Stack JavaScript Techdegree Student 8,392 Points

First of all, you should have the normalize CSS file first always. Then bootstrap. Then your styles. One thing I am noticing here is that you are linking a lot of stylesheets. You should try to keep the number of stylesheets as minimal as possible. In this case, a normalize stylesheet, Bootstrap, and ONE custom stylesheet with all your styles in it.

However, from what I am seeing here, put the custom.css below all the other css files and then try it. If you are still stuck, go into the developer tools. You can go to the computed styles section (usually a tab under where you get the visual box model) and find the property you are trying to change. When you expand that property, it will show you what is overwriting what.

John Napier
John Napier
14,383 Points

Really, you don't need to (shouldn't??) use normalize.css with Bootstrap. Bootstrap comes with it's own version of normalize called Reboot.
https://getbootstrap.com/docs/4.1/content/reboot/

I haven't read of any issues, but it is redundant to add normalize.css to a Bootstrap project.