Bootstrap 4 carousel works with image tags inside divisions by default. In a recent project for a client i had to use the background images for the carousel. But after adding the background image paths to the carousel items in stylesheet images did not show up!
After a bit of digging i found out that the problem was with the height of the carousel items which are enclosed in a wrapper DIV which itself has zero height to start with!
So the solution was to increase height of parent DIV to 100% of viewport (which is the visible area of the web page) and also set height of items to 100%.
<div class="carousel-inner vh-100"> <div class="carousel-item h-100"></div>
vh-100 and h-100 are utility classes provided by Bootstrap 4
vh-100 is for 100% of viewport height and h-100 is for 100% height. You can find more about these utility classes for sizing here: https://getbootstrap.com/docs/4.3/utilities/sizing/
Next set the background size of carousel item to cover to make the background images fully responsive.
Full code for carousel looks like this after edits:<div id="carouselExampleControls" class="carousel slide " data-ride="carousel"> <div class="carousel-inner vh-100"> <div class="carousel-item h-100 active" style="background:url('images/sample1.jpg'); background-size:cover"></div> <div class="carousel-item h-100" style="background:url('images/sample2.jpg'); background-size:cover"></div> <div class="carousel-item h-100" style="background:url('images/sample3.jpg'); background-size:cover"></div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
Thats it! If you have any other method of achieving the same result let me know in the comments below.
Copyright Web/ Design/ Vista 2022 ©