title: Carousal indicators are overlapping in react
body: <p>In the website, the carousal indicators are shown as below image-
  <a href="https://i.stack.imgur.com/i8JjC.png" rel="nofollow noreferrer">first image</a></p>
  <p>while i want the carousal indicators as below image-
  <a href="https://i.stack.imgur.com/n0obq.png" rel="nofollow noreferrer">second image</a></p>
  <p>i am importing carousal from react-bootstrap/carousal and i am also using bootstap.min.css.</p>
  <p>while i have seen some source code of carousal indicators where they are designed as li element as <a href="https://i.stack.imgur.com/kAAFp.png" rel="nofollow noreferrer">third image</a></p>
  <p>, but in my case the carousal indicators are designed as buttons as <a href="https://i.stack.imgur.com/JzyMF.png" rel="nofollow noreferrer">fourth image</a>.</p>
  <p>can you geniuses, please help me out?</p>