CSS Bootstrap Overrides My Own CSS

Why is Bootstrap's CSS overwriting my CSS?

It's going to be a specificity issue, the cascade (order of CSS files/selectors) is only one aspect of how which properties and styles will be applied. If Bootstrap has #one .two defined and you define .two, any properties defined by #one .two will override the properties defined by .two in your CSS. The specificity of #one .two is 0 1 1 0 and .two is 0 0 1 0. The priority of these numbers is left to right. The second number is 0 for .two but 1 for #one .two. Your style is less specific and will not get applied.

If you run into a property in a Bootstrap selector that uses !important you will also have to use !important for that property. Otherwise increase specificity other ways and avoid !important if you can.

Also, consider combining all your CSS files into one file.

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.

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.

---

Related Topics