CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
nina_dev
nina_dev

Reputation: 695

custom css cannot override bootstrap css

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:enter image description here

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,

Upvotes: 1

Views: 2417

Answers (4)

Prameshwar Kumar
Prameshwar Kumar

Reputation: 117

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

Upvotes: 2

Abdul Rehman Zafar
Abdul Rehman Zafar

Reputation: 64

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.

Upvotes: 0

Weybansky
Weybansky

Reputation: 716

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

Upvotes: 0

pseudoku
pseudoku

Reputation: 728

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.

Upvotes: 1

Related Questions