How to Make Bootstrap 4 Carousel Images Responsive

How to make bootstrap carousel image responsive?

Remove the following CSS rules from respective files:

In home.php file

.carousel .item>img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    height: 100%;
}

in carousel.css

.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}

Also, add margin-top: 51px; to .carousel class in carousel.css file and remove height:500px from the same class, because you have fixed navbar.

How to make Bootstrap 4 carousel images responsive?

You do not need a wrapper or something like that. The default styling for the .active .carousel-item is display: flex.

You will need to add

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

to your custom css.

How to make images in Bootstrap 4 slider responsive?

Since you set the images to be as backgrounds for .carousel-item AND you don't have any other content on those items you should set couple more properties in order to see those images. Example:

.carousel-item {  height: 400px; /* set some height*/  /* optionals */  background-repeat: no-repeat;    background-position: cneter;  background-size: 100% 100%; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="7000">    <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" role="listbox">        <div class="carousel-item active img-fluid" style="background-image: url(https://via.placeholder.com/1000x1000?text=First+Slide);">            <div class="carousel-caption text-center">                <img class="hydrive_logo" src="img/Hydrive_logo.png" alt="Hydrive - logo"/>                <a class="btn btn-outline-light btn-lg" href="#Bolid">Get Started</a>            </div>        </div>        <div class="carousel-item" style="background-image: url(https://via.placeholder.com/1000x1000?text=Second+Slide);"></div>        <div class="carousel-item" style="background-image: url(https://via.placeholder.com/1000x1000?text=Third+Slide);"></div>    </div>    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">        <span class="carousel-control-prev-icon" aria-hidden="true"></span>    </a>    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">        <span class="carousel-control-next-icon" aria-hidden="true"></span>    </a></div>

Bootstrap 4 carousel not responsive images

This is a known issue in Bootstrap 4 Alpha 6...

https://github.com/twbs/bootstrap/issues/21611

As a workaround you can use..

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

http://www.codeply.com/go/0QUU06MiIL

---

Related Topics