CSS bootstrap overwritten my own CSS codes

Question

Currently, I'm trying to code a website with a slideshow shown in this w3school tutorial here : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto

The example as shown has their own set of CSS to enable the transitions and effects of the slideshow to be smoothly fading in and out. Upon adding CSS bootstrap, the effects of the slideshow got rough and the transition isn't smooth anymore.

CSS used : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

I linked it before my css file like this :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">

followed by

<link rel="stylesheet" href="css.css" type="text/css">

From previous examples I searched, many said to put bootstrap before my own css file so that my own codes will not be overwritten. But I've tried but it does not work in this case. Could anyone advise me on this? Thank you.

Answer 1

Try adding !important to the CSS rules you don't want to be affected.

Try using your browser's inspection tool to see what CSS rules are applying to each element

See for more here: https://stackoverflow.com/questions/9245353...

Answer 2

you need to namespace the class names used in the slideshow, so that it wasn't affected by the bootstrap styling. It's hard to deal with bootstrap specificity in case classnames override.

My suggestion is to use something like w3_slideshow_ and prefix all the class names with it. class="text" will turn into class="w3_slideshow_text" , etc. Then update styling and js accordingly.

If there are still some issues, check the inspector for specificity and override the styling applied by bootstrap with !important (not the cleanest approach) or by applying a more specific selector.

Answer 3

As Giann Dall mentioned, you could try adding !important

I think your CSS attributes may be overwritten by CSS from bootstrap because it is more specific. For example:

body > p {}

is more specific than

p {}

Therefor, body > p {} is applied