How to Override Bootstrap CSS Styles

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>

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>

Override Bootstrap CSS with custom CSS

Don't add important. That is a bad habit to fall into and will cause you even more headaches in the future. Plus, I doubt it will solve the problem. Instead, try to find out why your targeting (table .table.table-responsive .table-middle) isn't targeting and overriding the table you want.

The easiest way to do this is via Chrome or Firefox's "Inspect Element". Take a look at the table you want to change. See where the margin-bottom lies. Maybe it's on .table.blue or .container .table or something.

However, judging by your targeting, I doubt that is an issue. Instead, I believe you aren't targeting the element you want.

 table .table.table-responsive .table-middle

will look for all <table> elements, then look for children of that <table> element with the classname of table AND table-responsive, and then look inside that element for children with the classname of table-middle.

Your HTML would have to look like this:

<table>
    <??? class='table table-responsive>
        <??? class="table-middle">

Instead, I'm guessing you have a <table> element that looks something like this:

<table class="table table-responsive table-middle">

Simply writing table.table or table.table-responsiveshould override bootstrap. Worst comes to worst, .table.table-responsive.table-middle will almost certainly work.

Remember

.classname .another-classname

with a space goes parent -> child

.classname.another-classname

without a space is one element that has both of those classes.

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.

Can't override bootstrap style with my own stylesheet

If you make your CSS selectors more specific, there is a level of specificity that determines which styles get applied. So doing:

li.menuitem { color: black; }

Makes it more specific. Also adding !important indicates that this style would have priority:

.menuitem { color: black !important; }

Careful with nested CSS hierarchies and using !important. It could cause issues if you want to override those changes in a different context. Only use when necessary, but it's OK to use.

custom css cannot override bootstrap css

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