Hello, I have a bootstrap carousel and I would like to modify its size but I can't do it, and I tried to apply modifications to the main class but I only manage to reduce the size of the carousel itself, but not of the carousel images, how do I set a custom size?
Carousel code:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/paso1.png" alt="Facebook" class="img-responsive">
</div>
<div class="item">
<img src="img/paso2.png" alt="Geolocalisacion" class="img-responsive">
</div>
<div class="item">
<img src="img/paso3.png" alt="Pedir" class="img-responsive">
</div>
<div class="item">
<img src="img/paso4.png" alt="Recibir" class="img-responsive">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
try to modify the size of "myCarousel" and this does not influence the size of the photos, and when trying to modify the size of the photos percentagewise nothing happens either.
Carousel's CSS has
height
set to.carousel
and.carousel-inner > .item > img
. You have to change both:Here is an example: https://jsfiddle.net/cedfkkn6/
Another example with only percentage values (they are relative to the container): https://jsfiddle.net/cedfkkn6/1/
Try with
carousel-inner img
to resize the image andcarousel-inner
to resize the carousel itself, see:CSS