I am struggling to vertically align the carousel indicators in Bootstrap 5. The solutions I have found so far are for Bootstrap 4, but they do not seem to work for me. Here is the markup for my carousel indicators.
<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 note that I have directly copied this code from Bootstrap's documentation and added some custom CSS to turn the indicators into circles. My goal is to achieve:
o
o
o
o
instead of o o o o.