0

Necesito ayuda sobre el carrusel de bootstrap, ya que, he estado varios días ya tratando de poder corregir la altura del carrusel y no he podido. Le he dado css personalizados y aun así no puedo encontrar la solución, al modificarlo, se me empieza a desconfigurar el carrusel y el body de la página. Quiero que mi carrusel solo ocupe la mitad de la página. Espero su respuesta, gracias.

Ese es el codigo como vienen en bootstrap, yo solo modifique los titulos y la ruta de las fotos.

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="../HappyKids/images/candy48.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block">
            <h5>Candy Bar</h5>
            <h1>Happy Kids</h1>
            <h5>Decoración y Animación para tus eventos</h5>
          </div>
        </div>
        <div class="carousel-item">
          <img src="../HappyKids/images/candy49.jpg" class="d-block w-100" alt="logo">
          <div class="carousel-caption d-none d-md-block">
            <h1>Galería</h1>
            <p>Visita nuestra galería de fotos.</p>
            <div class="btn-group mt-2" role="group" aria-label="button">
              <a class="btn btn-info btn-block font-weight-bold" href="galeria.html">Galería</a>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <img src="../HappyKids/images/candy47.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block">
            <h1>Third slide label</h1>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </div>
        </div>

      <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Anterior</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Siguiente</span>
      </a>
    </div>
  </div>
0

1 respuesta 1

0

Tienes que sobreescribir el css a los items de dentro del carrusel. Este ejemplo es para media altura aprox.

.carousel-item {
  height: 65vh;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Añado la fuente, para que puedas tener otro ejemplo completo: Ejemplo bootstrap carrusel

Tienes tambien otro hilo en lo que se resuelve lo mismo: Stackoverflow

1
  • 1
    Si dices que se resuelve lo mismo ¿Porqué la necesidad de apoyar el duplicado? el 22 mar. 2019 a las 12:29

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.