multi-item-carousel not working when I use it in bootstrap

Question

1. In my react project I use bootstrap and when I use react multi-item-carousel and in output, only some dots are showing.

2. And when I use multi-item-carousel in another project in which there was no bootstrap used then Carousel appears as expected.

So why Carousel not showing properly in my first project? Please help me

1st result--

enter image description here

2nd result (expected)--

enter image description here

Following code, I used in both projects.

import React, { Component } from 'react';
import Carousel from 'react-multi-carousel';

class Simple extends Component {
  
  
  render(){
    const responsive = {
      superLargeDesktop: {
        // the naming can be any, depends on you.
        breakpoint: { max: 4000, min: 3000 },
        items: 5
      },
      desktop: {
        breakpoint: { max: 3000, min: 1024 },
        items: 3
      },
      tablet: {
        breakpoint: { max: 1024, min: 464 },
        items: 2
      },
      mobile: {
        breakpoint: { max: 464, min: 0 },
        items: 1
      }
    };
  return (
    <div>
      <Carousel responsive={responsive}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</Carousel>;
    </div>
  );
}
};

export default Simple;