¿Cómo puedo subir el texto hacia la parte superior? me lo pone hacia abajo.
Le puedo meter un padding
, pero creo que no es la forma correcta de subirlo, además me daría error a la larga, he estado buscando tutoriales y no encuentro la manera, si me podeis ayudar lo agradecería, os paso la pagina web para que veais como el texto esta puesto abajo, también me gustaría ponerle una box con opacidad para que se vea mejor el texto, por que con las imágenes se puede ver mal.
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item vh-100 active">
<img class="d-block w-100" src="https://wallpaperplay.com/walls/full/4/2/2/234831.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h1 class="display">Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, repellendus.</p>
</div>
</div>
<div class="carousel-item vh-100">
<img class="d-block w-100" src="https://wallpaperplay.com/walls/full/f/8/a/234838.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem ipsum dolor sit amet.</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, repellendus.</p>
</div>
</div>
<div class="carousel-item vh-100">
<img class="d-block w-100" src="https://wallpaperplay.com/walls/full/1/d/4/234836.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem ipsum dolor sit amet.</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, repellendus.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
.carousel-item {
position: relative;
display: none;
float: left;
width: 100%;
margin-right: -100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}
.carousel-caption {
position: absolute;
right: 15%;
bottom: 20px;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
}