How to Make Bootstrap Carousel Image 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.

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.

You could do this:

img {
    height: 300px !important;
    object-fit: cover;
}