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?

make sure you include your custom css after the bootstrap css! — Sebastian Brosch
– Sebastian Brosch, Commented Jul 27, 2016 at 20:28

Sebastian Brosch · Accepted Answer · 2016-07-27 20:30:19Z

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>

answered Jul 27, 2016 at 20:30

Sebastian Brosch

43.8k15 gold badges78 silver badges89 bronze badges

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

Comments

Sameera Prasad Jayasinghe · Accepted Answer · 2016-07-28 04:12:43Z

0

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

edited Jul 28, 2016 at 4:12

user5306470

answered Jul 27, 2016 at 20:34

Sameera Prasad Jayasinghe

1,8201 gold badge15 silver badges15 bronze badges

Collectives™ on Stack Overflow

Custom css overridden by Bootstrap in browser

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related