Override Bootstrap Column Style

Question

Bootstrap has the style table {border-collapse: collapse; border-spacing:0;} table {border-collapse: collapse; border-spacing:0;} . I want to override this, so I created a class and applied it to the table in question:

 table.FormGroupContainer { border-collapse: separate; border-spacing: 2px; } 

but still the borders remain collapsed. The Chrome element inspector shows that Bootstrap CSS has been overridden, but only disabling the style in the inspector allows border spacing. I watched this in IE 11 and Firefox 31.0. In addition, inline styles override (as shown in the Chrome inspector), but do not work until I disable Bootstrap style.

The order in which the CSS loads is also irrelevant. What gives? Is not the highest class specific?

Answer 1

Downloading an order was a problem. My stylesheet loaded before Bootstrap. I added a lot of specificity to the rule in my stylesheet, which allowed it to compete with the Bootstrap table CSS. Thanks @Christina.