search

sjafferi / svelte-images

A Svelte component for displaying images
MIT License
21 stars 5 forks source link

CSS conflicts with Bootstrap 5 CSS #9

Open mylastore opened 3 years ago

mylastore commented 3 years ago

I am using Bootstrap 5 CSS and apparently svelte-images is using common classes found on Bootstrap CSS for example "container and nav" so the carousel was not working correctly for me. I suggest adding a prefix to your CSS classes for example "c-container and c-nav" that fixed my CSS issues hope this help someone else.

BrettBurbidge commented 2 years ago

@mylastore Nice Catch! I was trying to figure out why my Carousel was not working.

I made the following changes to Carousel.svelte and it fixes the issues. I only made these changes locally so if/when I update from npm they will be overwritten. from:

  .container {...}

to:

  .i-container {...}

I also changed all the

.nav{...} to .i-nav{...}

I updated all references to these changed classes now my Carousel works awesome.