Search code examples
htmlcsstwitter-bootstrapgoogle-chromestylesheet

Custom css overridden by Bootstrap in browser

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:

enter image description here

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

Solution

  • 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>