How to Override Bootstrap 3 Styles with External Custom CSS

How do you override bootstrap 3 styles with external custom CSS?

There are a few things to consider:

Stylesheet order - The stylesheet you are trying to overwrite should come first.

6.4.1 Cascading order

Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.
In you case this shouldn't be an issue.
```
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/overwrite.css" rel="stylesheet"/>
```

Selector specificity - Read up on specificity (mdn).
Put briefly, you should use a selector with the same specificity (assuming it appears later and will overwrite the initial declaration), or a selector that is more specific.
Bootstrap 3's default styling uses the following for the navbar's color:
```
.navbar-inverse {
    background-color: #222;
    border-color: #080808;
}
```
You could try using a more specific selector:
```
.navbar.navbar-inverse {
    background-color: #FF0000;
}
```

Stylesheet paths - If all else fails, your stylesheet path(s) must be wrong.

How to override bootstrap?

It appears the key for changing the background in the navbar is associated with background-imagea gradient on the .navbar-default. If you apply none to that property you should get the desired effect.

.navbar-default{
  background-color: red;
  background-image: none;
}

The other overrides should work normally as you saw with the text color change.

DEMO

External stylesheet not overriding bootstrap

You need to look at CSS Specificity rules. Just because you define a rule doesn't automatically mean it overrides a rule declared earlier.

Specificity is calculated on 4 factors abcd:

a     (1 if inline, 0 if in a file),
b     number of IDs in CSS rule
c     number of attribute selectors, classes and pseudo-classes,
d     number of element names and pseudo-elements.

The rule with the largest 4 digit number abcd wins and overrides lesser declarations, so inline declarations will override anything declared in an included CSS file.

How can I override Bootstrap CSS of an a element?

You need the !important keyword to override the style.

/* Here's styles.css: */
a {  text-decoration: none;  color: black !important;}
header {  text-align: center;  color: black;}

<!DOCTYPE html><html lang="en">
<head>  <meta charset="utf-8" />  <title>Blog</title>  <meta name="viewport" content="width=device-width, initial-scale=1">  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">  <link rel="stylesheet" href="css/styles.css" /></head>
<body class="container">  <header>    <h5>Blog</h5>    <a href="#">Home</a>    <a href="blog.html">Blog</a>    <!--blog.html is the same as this one which is home.html-->  </header></body>
</html>

How to avoid bootstrap css overriding the custom css?

Without seeing the actual code its impossible to give you an actual markup for your situation. However, at the root of the problem is Specificity. You can read more about it here.

Basically, the more selectors you use in your CSS, the higher it will rank in specificity. For example, referencing your HTML above,

.text-title {}

is not very specific.

.label-text .text-title {}

is more specific and will take precedence.

.label .label-text .text-title {}

is even more specific. And:

div.label > .label-text > .text-title {}

is yet even more specific and will take precedence over all the others.

So the solution to the problem is that your CSS needs to get more specific than the Boostrap CSS. Inspect the problem elements in the browser and see what selectors Bootstrap is using. Then use more specific ones in your custom CSS.

Unfortunately, Bootstrap uses !important in a number of situations, so you will be forced to use it as well to over ride theirs.