How to vertically align carousel indicators in Bootstrap 5?

Question

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 .

Answer 1

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;
}