0

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.

Sean
  • 63
  • 1
  • 8
  • 1
    Can you show your code please, it's impossible to see what the problem is otherwise. – paddyfields Feb 21 '17 at 18:44
  • Posting a code example will be really usefull – Giannis Dallas Feb 21 '17 at 18:47
  • Hi Paddy and giann, if you would try adding the bootstrap in the w3school tutorial above, you would face the same issue. I've tried and can you advise me how to overcome it? I feel by adding !important for every single line of css is very tedious. Thank you so much! – Sean Feb 22 '17 at 15:06

3 Answers3

0

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...

Community
  • 1
  • 1
Giannis Dallas
  • 648
  • 2
  • 8
  • 27
0

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.

dhorelik
  • 1,477
  • 11
  • 14
0

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

DerpyNerd
  • 4,743
  • 7
  • 41
  • 92