Answer the question
In order to leave comments, you need to log in
How to set the height of the block in which the bootstrap carousel is 4?
Good evening!
How can I set the height of the block s1 so that the carousel has a fixed height?
I tried, but the inscriptions on the result are simply not visible!
.carousel-inner{
height: 750px;
}
<section class="carousel" id="carousel">
<div class="s1">
<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 active">
<img class="d-block w-100" src="img/carousel_s1.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem ipsum.</h5>
<p>Lorem ipsum dolor.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/carousel_s2.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h1>Lorem ipsum.</h1>
<p>Lorem ipsum dolor.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/carousel_s3.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Lorem ipsum.</h5>
<p>Lorem ipsum dolor.</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>
</div>
</section>
Answer the question
In order to leave comments, you need to log in
In the current layout, you need to add the img-fluid class to images
and set the height in CSS
.carousel-item img {
height: 750px;
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question