Introduction

If you have problems with image height with responsive carousel with bootstrap 4 and browsers: Chrome, Opera and Vivaldi check the following solutions.

Solution 1: Update bootstrap

The problems with responsive caruosel should be fixed on the latest bootstrap 4 version. If problem persists check the next solutions.

Solution 2: You are missing classes

You need to add 3 classes which covers the transitions:

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

Solution 3: Overwrite image height

You can overwrite the size of the image using the 100% on height and width:

width:100%; height:100%