0

I'm working on a project that's using the Carousel from react-bootstrap. This only works if I import "bootstrap/dist/css/bootstrap.min.css"; in the app. The issue is that doing so changes the CSS for the entire app, which has lots of existing UI that I would then need to rework. Is there a way to use the bootstrap CSS for the carousel component only, leaving the rest of my React app alone?

I've tried importing bootstrap.min.css in the file where the carousel component is used rather than in App.js. This doesn't seem to make a difference though.

user43712
  • 147
  • 1
  • 2
  • 9

1 Answers1

2

Solution 1: Bootstrap provides the option to include components selectively with scss. This requires you to have a build setup that handles scss for you, e.g. webpack, rollup or node-sass itself.

Edit: added minimal set of required scss classes. bootstrap 4.5

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/_variables";
@import "../node_modules/bootstrap/scss/_mixins";
@import "~bootstrap/scss/_carousel.scss";

The code snippet shows the main part which is required for styling the carousel. But if you have a look at the carousel.scss there are various dependencies to bootstrap functions you would have to import as well. With that it is possible to have a minimal bootstrap configuration with your required styles.

Solution 2: You might scope the component and its styles within a web component. That way the bootstrap.min.css is not leaking styles out of the carousel web component. This approach goes beyond the question and does not consider how the carousel works together with the rest of your application, as also events and JS interactions would be scoped.

lotype
  • 593
  • 3
  • 8