0

I use react-bootstrap to make the carousel, and I want to move the caption and indicators below the image. The caption part is simple, since I just needed to apply the code below as a className. 

carouselCaption: {
    position: 'relative',
    left: 'auto',
    right: 'auto'
}

Problem appears with indicators, since I don't have direct access to them in code, like I do with <Carousel.Item> So here's my question, how would I go about doing it? There is quite a lot of answers for bootstrap, but I haven't found a helpful one for react-bootstrap

Jarek N
  • 55
  • 9
  • Use `.carousel-indicators` class to add some style to indicators. – N'Bayramberdiyev Oct 28 '19 at 14:58
  • Thing is, I'm using Material-UI primarily in this project, and I want to keep their way of styling - the one with Hook API. – Jarek N Oct 28 '19 at 15:13
  • Also, `position: 'relative'` doesn't change it the way it does with text – Jarek N Oct 28 '19 at 15:39
  • Looking for the same in vanilla Bootstrap 5, and so far nothing. The position:relative effectively kills adjusting margins and padding via CSS. – Bytech Oct 31 '22 at 20:30
  • Does this answer your question? [Bootstrap 3 default Carousel: How to move indicators down and outside of slide container?](https://stackoverflow.com/questions/20207487/bootstrap-3-default-carousel-how-to-move-indicators-down-and-outside-of-slide-c) – Bytech Oct 31 '22 at 20:46

0 Answers0