0

Hace rato que estoy intentando poner ciertos textos encima de un carousel de boostrap y no he podido ¿Alguien tiene alguna solución para eso?

2
  • ¿de que versión de bootstrap estamos hablando y que código has puesto hasta el momento para intentarlo?
    – masterguru
    el 13 jun. 2022 a las 15:21
  • Por favor, edita la pregunta para limitarla a un problema específico con suficiente detalle para identificar una respuesta adecuada.
    – Comunidad Bot
    el 14 jun. 2022 a las 6:45

1 respuesta 1

0

En caso de que estes usando bootstrap 4, debes agregar una modificación al css de este modo para la clase carousel-caption:

.carousel-caption {
  top: 0;
  bottom: auto;
}

Dejo un snippet de ejemplo:

.carousel-caption {
  top: 0;
  bottom: auto;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<h1>
Carousel
</h1>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="...">
      <div class="carousel-caption">
        <h5>Imagen bonita</h5>
        <p>Es una imagen bonita sacada de google images</p>
      </div>
    </div>
  </div>
</div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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