CODEWITHSUNDEEP
csstwitter-bootstrap
Or A
Or A

Reputation: 1789

override twitter bootstrap doesn't work for some reason

so my page header look like this:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="js/app.js"></script>
<link href="css/style.css" rel="stylesheet">

and inside style.css i have:

.navbar-default {
    background-color: #FDFDFD;
    border-color: #E7E7E7;
}

however, when the page loads, i see that the bootstrap css class override mine and not vice versa. Am i missing something here? could it be because i'm using the cached version (i don't think so). See attached image

enter image description here

please advise.

Upvotes: 0

Views: 473

Answers (2)

Maciej Małecki
Maciej Małecki

Reputation: 2745

Probably you should specify more your css rule like

#something .nav div.navbar-default

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Upvotes: 2

Xarus
Xarus

Reputation: 7039

Add !important after the CSS rule but before the semi colon inside your CSS rules.

Upvotes: 0

Related Questions