Override Bootstrap CSS with custom CSS

Question

I have a small problem overriding some of Bootstrap's CSS style.

The standard definition of a bootstrap table has the following code:

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

I would like to set margin-bottom to 0px, using my own css code, but I'm having some problems overriding it.

This is my code:

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

How to fix it?

Thanks in advance! :)

your code will only change the object with the class 'table-middle' inside an object with class 'table' and 'table-responsive' which is inside a table. — Mg Thar, Jan 27 '16 at 07:59
Not quite sure what you're refering to. I've applied the class to my table. — Mortenkp25, Jan 27 '16 at 08:10

score 3 · Accepted Answer · edited Feb 01 '16 at 09:19

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.

i believe table .table-responsive .table-middle might work. – Fiido93 Jan 27 '16 at 08:20 — Fiido93, Jan 27 '16 at 08:20

score -2 · Answer 2 · answered Jan 27 '16 at 07:57

-2

try adding the important.

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

answered Jan 27 '16 at 07:57

ickyrr

1,963
1
14
14

Yeah it would. But I don't think this is a good practice, though. – ickyrr Jan 27 '16 at 08:43

score -2 · Answer 3 · answered May 29 '20 at 18:43

-2

Try Using !important after the css text. I have shown a example below padding-bottom: 4.5rem !important;

answered May 29 '20 at 18:43

Nishanth VG

1

Where is the example below? – Chris Catignani May 29 '20 at 20:43

Override Bootstrap CSS with custom CSS

3 Answers3

Linked