Custom css overridden by Bootstrap in browser

Question

I have my stylesheet directory set up like this

stylesheets

    bootstrap.min.css

    style.css

In my style.css, I want to edit the pre tag like this:

pre {

    background-color: #d9edf7;

    border: #d9edf7;

    color: navy;

}

However, this is not getting picked up in the browser. It seems like the browser is going with the styles in bootstrap.min.css. This is what it looks like in Chrome's inspector tools when I hover over the block of pre tag:

So how do I get it to use my custom css instead?

Answer 1

You have to make sure you include your custom CSS after the Bootstrap CSS, like the following:

<head>
    <!-- don't include your custom CSS here! -->
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
    <link rel="stylesheet" type="text/css" href="custom.css">
    <style>
        pre {
            background-color: #d9edf7;
            border: #d9edf7;
            color: navy;
        }
    </style>
</head>

Custom css overridden by Bootstrap in browser

Sign up