How to Override Bootstrap Style

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

Overriding Bootstrap CSS

No need of custom style, use built-in class : https://getbootstrap.com/docs/4.1/utilities/borders/

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="card card-sm border-0" id="localcard">
  <p> See, no  Border! </p>
</div>

default bootstrap is overriding my custom css in react

Try maybe using bootstrap as a dependency:

npm i bootstrap

and import in index.js:

import 'bootstrap/dist/css/bootstrap.min.css';

or even try a react-bootstrap dependency

npm i react-bootstrap

Bootstrap is written with !important rules, so they has the highest priority if given!
Maybe you can try inline css in React elements (although not recomended in a simple HTML)

All the best!

Override bootstrap !important

Your style.css file loads before your Bootstrap css file. However, you have to load your style.css after the bootstrap-select.min.css file in order to override the Bootstrap styles.

CSS file priority