custom css cannot override bootstrap css

Question

I have some styles in my custom CSS to override bootstrap CSS, but it seems they can not override bootstrap CSS. When I checked the styles using chrome developer mode I can only see bootstrap styles being applied! Here is a screen shot of my chrome bootstrap:

Here is what I have in my css:

.panel-default>.panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border: 10px solid #b03636;


}
.panel-heading {
    padding: 10px 15px !important;
    border: 10px solid transparent !important;
    border-top-left-radius: 3px !important;
    border-top-right-radius: 3px !important;
}

Am I missing anything? Thanks,

show us the issue in fiddle/snippet. so that we can easily help to you on that. — Suresh Ponnukalai
– Suresh Ponnukalai, Commented Apr 16, 2018 at 7:58
"When I checked the styles using chrome developer mode I can only see bootstrap styles being applied!" —Your screenshot shows that the CSS in your question is being applied though! — Quentin
– Quentin, Commented Apr 16, 2018 at 8:11
@Quentin as you can see on the screenshot the border of 10 px in my custom CSS has not been applied! — nina_dev
– nina_dev, Commented Apr 16, 2018 at 17:56

Prameshwar Kumar · Accepted Answer · 2018-11-16 09:45:24Z

2

Link your CSS file to HTML properly and import after bootstrap CSS like below so, you no need to write !important for all things to overnight.

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">

answered Nov 16, 2018 at 9:45

Prameshwar Kumar

1175 bronze badges

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

Comments

pseudoku · Accepted Answer · 2018-04-16 00:38:47Z

1

One thing you should check first: Go through all the styles and see whether the ones in your custom CSS are found at all. If so, they'll likely be crossed out to imply that they were overwritten by the bootstrap styles. If not though, that means that for one reason or another it's not finding your styles at all, and that's where the problem lies.

If they're definitely being overwritten, I might also recommend making sure that the custom CSS is being called after the bootstrap files.

answered Apr 16, 2018 at 0:38

pseudoku

7284 silver badges12 bronze badges

Comments

Weybansky · Accepted Answer · 2018-04-16 04:19:17Z

0

I think the problem is that your css file is properly linked or not linked at all to your HTML page. You should check that first

answered Apr 16, 2018 at 4:19

Weybansky

7465 silver badges7 bronze badges

Comments

Abdul Rehman Zafar · Accepted Answer · 2018-04-16 07:52:03Z

0

First make sure your custom CSS is loaded after the Bootstrap CSS file and if it does not help, Use !important attribute with custom CSS to force the overriding.

answered Apr 16, 2018 at 7:52

Abdul Rehman Zafar

647 bronze badges

Collectives™ on Stack Overflow

custom css cannot override bootstrap css

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related