CODEWITHSUNDEEP
htmlcsstwitter-bootstrapgoogle-chromestylesheet
OneMoreQuestion
OneMoreQuestion

Reputation: 1753

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?

Upvotes: 0

Views: 84

Answers (2)

Sameera Prasad Jayasinghe
Sameera Prasad Jayasinghe

Reputation: 1810

Place style.css after bootstrap.min.css, so style overrides bootstrap.

Upvotes: 0

Sebastian Brosch
Sebastian Brosch

Reputation: 43574

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>

Upvotes: 1

Related Questions