Bootstrap change carousel height
like Answers above, if you do bootstrap 4 just add few line of css to .carousel , carousel-inner ,carousel-item and img as follows
.carousel .carousel-inner{
height:500px
}
.carousel-inner .carousel-item img{
min-height:200px;
//prevent it from stretch in screen size < than 768px
object-fit:cover
}
@media(max-width:768px){
.carousel .carousel-inner{
//prevent it from adding a white space between carousel and container elements
height:auto
}
}
You may also want to add
object-fit: cover;
To preserve the aspect ration for different window sizes
.carousel .item {
height: 500px;
}
.item img {
position: absolute;
object-fit:cover;
top: 0;
left: 0;
min-height: 500px;
}
For Bootstrap 4 and above replace .item
with .carousel-item
.carousel .carousel-item {
height: 500px;
}
.carousel-item img {
position: absolute;
object-fit: cover;
top: 0;
left: 0;
min-height: 500px;
}
From Bootstrap 4
.carousel-item{
height: 200px;
}
.carousel-item img{
height: 200px;
}
The following should work
.carousel .item {
height: 300px;
}
.item img {
position: absolute;
top: 0;
left: 0;
min-height: 300px;
}
JSFiddle for reference.