0

I don't know how to vertically align the carousel indicators in Bootstrap 5. All the solutions that I'm finding here are for Bootstrap 4, which don't work for me. This is my carousel indicators markup. 

       <div class='carousel-indicators'>
            <button
                type='button'
                data-bs-target='#carouselExampleIndicators'
                data-bs-slide-to='0'
                class='active'
                aria-current='true'
                aria-label='Slide 1'
            ></button>
            <button
                type='button'
                data-bs-target='#carouselExampleIndicators'
                data-bs-slide-to='1'
                aria-label='Slide 2'
            ></button>
            <button
                type='button'
                data-bs-target='#carouselExampleIndicators'
                data-bs-slide-to='2'
                aria-label='Slide 3'
            ></button>
            <button
                type='button'
                data-bs-target='#carouselExampleIndicators'
                data-bs-slide-to='3'
                aria-label='Slide 4'
            ></button>
        </div>

Please keep in mind that I completely copied this code from Bootstrap's documentation itself. I have added some custom CSS to the indicators to make them circles. So, what I'm aiming for is

o
o
o
o

instead of o o o o .

Ibrahim Farooq
  • 408
  • 1
  • 3
  • 14
  • Is there no CSS involved ? cause i see neither bootstrap classes nor styles here. Maybe add it as a runnable snippet. – Raxi Dec 30 '21 at 17:12
  • @Raxi These are bootstrap 5 classes. I didn't include the code for the whole carousel. That can be seen here: https://getbootstrap.com/docs/5.0/components/carousel/#with-indicators – Ibrahim Farooq Dec 30 '21 at 17:14
  • 1
    yea i get that. you'll likely want to set `flex-flow: column nowrap;` and `top: 0;` on your `carousel-indicators`, to get it to cling to the left. – Raxi Dec 30 '21 at 17:19
  • @Raxi Worked like a charm. Thanks a bunch! – Ibrahim Farooq Dec 30 '21 at 17:37

1 Answers1

0

The indicators are in a line, because of display: flex of the class carousel-indicators.

In order to align them vertically, you need to change the flex-direction to column.

Add the following rule to your code:

.carousel-indicators {
  flex-direction: column;
}
Konstantinos Gallis
  • 956
  • 6
  • 11