es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo alinear verticalmente los indicadores de carrusel en Bootstrap 5?

30 Jul, 2023 Programación

No sé cómo alinear verticalmente los indicadores del carrusel en Bootstrap 5. Todas las soluciones que estoy encontrando aquí son para Bootstrap 4, las cuales no me funcionan. Este es el marcado de mis indicadores del carrusel.

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

Por favor, ten en cuenta que he copiado completamente este código de la documentación misma de Bootstrap. He agregado un poco de CSS personalizado a los indicadores para hacerlos círculos. Por lo tanto, lo que busco es:

o
o
o
o

en lugar de o o o o.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para alinear verticalmente los indicadores del carrusel en Bootstrap 5, puedes agregar la clase d-flex y align-items-center al <div> que contiene los botones indicadores. Así es cómo debería verse el marcado actualizado:

    <div class='carousel-indicators d-flex align-items-center'>
    <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>

    La clase d-flex convertirá el <div> en un contenedor flexible, mientras que la clase align-items-center centrará verticalmente los botones dentro del contenedor.

    ¡Espero que esto ayude! Déjame saber si tienes alguna otra pregunta.

Comments are closed.