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.

Dimensionando el carrusel de Bootstrap

07 Jun, 2023 Programación

Tengo una imagen con un tamaño personalizado y quiero mostrarla en mi sitio web con un carrusel de Bootstrap, pero estoy teniendo problemas con el estilo del carrusel.

Este es el resultado:
enter image description here

Quiero alinear la imagen al centro.

Este es mi código. Solo agregué un estilo de ancho en mi código HTML.

...

First slide label

Some representative placeholder content for the first slide.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para alinear la imagen al centro en el carrusel de Bootstrap, puedes seguir los siguientes pasos:

    1. Elimina el atributo style del div carousel-inner.
    2. Agrega la clase mx-auto a la etiqueta img para centrarla horizontalmente dentro del carrusel.
    3. Si también quieres centrar la imagen verticalmente, puedes agregar la clase my-auto al div padre carousel-item.

    Aquí está el código modificado:

    <div class="carousel-inner">
  <div class="carousel-item active">
    <img src="img/post1.jpg" class="d-block w-100 mx-auto" alt="...">
    <div class="carousel-caption d-none d-md-block">
      <h5>Etiqueta de la primera diapositiva</h5>
      Contenido representativo de marcador de posición para la primera diapositiva.
    </div>
  </div>
</div>

    Con estos cambios, ahora tu imagen debería estar centrada dentro del carrusel de Bootstrap.

Comments are closed.