Can't override default bootstrap css

Question

I can not override the default css. Any help?

HTML:

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

    <!--Custom CSS-->
<link fref="css/custom.css" rel="stylesheet">

CSS:

 .navbar ,.navbar-defualt {
    background-color: red;
    border-color: blue;
}

I have tried targeting .navar-custom and .navbar-inverse

Answer 1

EDIT: Your CSS is linked incorrectly. Change the <link fref=""> to <link href=""> . So just a little typo here which explains it all.

Just to make sure you've linked your custom.css to your HTML file correctly, try to change your navigation background color like following:

.navbar-default {
   background-color: #00ffff !important;
}

If that does absolutely nothing at all, your CSS file is not linked to your HTML file and you should check what's wrong with the file path.

If it works, you should go for the .navbar-default only, since you don't necessarily need to override .navbar style properties when you're already doing it for the .navbar-default .

It's now safe to say it works and remove the !important markup , since it should work perfectly well without it.

Answer 2

If you need to override navbar-default class, then target same class. This is working.

Let me explain you this, in your code you are using navbar, navbar-default but those two classes are relevant to same class definition, so you do not need to use ','(comma). Instead of that use '.navbar.navbar-default'. This will give you the working CSS.

 .navbar-default { background-color: red; border-color: blue; }