Bootstrap css issue when using in react spfx

Question

When we use any bootstrap related (Carousel etc) with react in spfx. The design collapses.

"react-bootstrap": "^1.4.0",
import "bootstrap/dist/css/bootstrap.min.css";
import Carousel from 'react-bootstrap/Carousel';

Answer 1

Hi @Sajith Gopalakrishnan Hema ,

Please take a reference of below demo:

• https://github.com/kongmengfei/SharedSPFx/blob/main/spfx-BootstrapCarousel/src/webparts/bootstrapCarousel/components/BootstrapCarousel.tsx

Test result:

Best Regards,
Baker Kong

---

If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.