Bootstrap text-hide class being overridden

Question

Hi just wondering if anyone else is having a problem with the text-hide class not working on a mobile/tablet. Elements of it seems to be overridden by Boostrap's own CSS mainly 'color' and 'font-size' attributes. I have found if I put it in my custom CSS and give it a more specific selector name it works! In this case I am applying it to the 'navbar-brand' to use a logo as background image and hide the text.

.navbar-default .text-hide {
    color: transparent;
    border: 0px none;
    background-color: transparent;
    text-shadow: none;
    font: 0px/0 a;
}

It's great that there's an inbuilt image replacement class but it's weird that it is overridden by it's own CSS.

Thanks

Answer 1

you may try putting an !important; in every line of your css so that it will override the bootstrap.

sample code:

 color: transparent !important;