html - Override Bootstrap CSS with custom CSS -

i have small problem overriding of bootstrap's css style.

the standard definition of bootstrap table has following code:

.table { width: 100%; max-width: 100%; margin-bottom: 20px; } 

i set margin-bottom 0px, using own css code, i'm having problems overriding it.

this code:

table .table.table-responsive .table-middle { margin-bottom: 0px; } 

how fix it?

thanks in advance! :)

don't add important. bad habit fall , cause more headaches in future. plus, doubt solve problem. instead, try find out why targeting (table .table.table-responsive .table-middle) isn't targeting , overriding table want.

the easiest way via chrome or firefox's "inspect element". take @ table want change. see margin-bottom lies. maybe it's on .table.blue or .container .table or something.

however, judging targeting, doubt issue. instead, believe aren't targeting element want.

 table .table.table-responsive .table-middle  

will <table> elements, children of <table> element classname of table , table-responsive, , inside element children classname of table-middle.

your html have this:

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

instead, i'm guessing have <table> element looks this:

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

simply writing table.table or table.table-responsiveshould override bootstrap. worst comes worst, .table.table-responsive.table-middle work.

remember

.classname .another-classname 

with space goes parent -> child

.classname.another-classname 

without space 1 element has both of classes.