Bootstrap change carousel height

Question

I have a jsfiddle here - http://jsfiddle.net/gh4Lur4b/8/

It's a full width bootstrap carousel.

I'd like to change the height and still keep it full width.

Is the height determined by the image height?

How can I change the height of the carousel and keep it 100% width?

.carousel-inner{
    // height: 300px;
}

.item, img{
    height: 100% !important;
    width:  100% !important;
    border: 1px solid red;
}

You made a typo in the question – Muhammad Abdullah Jun 12 '20 at 12:42 — Muhammad Abdullah, Jun 12 '20 at 12:42
The best way to decrease size is changing the images height – CONTENT Feb 27 '21 at 21:01 — CONTENT, Feb 27 '21 at 21:01

score 38 · Accepted Answer · edited Sep 23 '22 at 18:51

38

The following should work

.carousel .item {
  height: 300px;
}

.item img {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 300px;
}

JSFiddle for reference.

edited Sep 23 '22 at 18:51

kelsny

23,009
3
19
48

answered Feb 18 '15 at 17:32

Bart Jedrocha

11,450
5
43
53

This doesn't change the image size. The carousel changes size but not the image. I think I was hoping for something like `background-size:cover;` so the image stretches http://jsfiddle.net/gh4Lur4b/17/ – ttmt Feb 18 '15 at 19:44
Oh I see what you mean. Sorry that wasn't clear from your original question. Please see my updated answer. – Bart Jedrocha Feb 18 '15 at 20:50
But now the image is squashed when the window is made smaller. In your jsfiddle when the window is made bigger the image is not stretched but expands. I need a similar effect when the window is made smaller. – ttmt Feb 18 '15 at 22:25
Do you know these images before-hand? In other words, can you access them within your CSS? – Bart Jedrocha Feb 19 '15 at 00:22
Also, this method seems to not be working if you use 50% as the height. Anyone know how to do that? Thanks. – HumbleWebDev Nov 03 '16 at 01:03

score 17 · Answer 2 · edited Jul 11 '22 at 10:31

17

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;
}

edited Jul 11 '22 at 10:31

MAXE

4,978
2
45
61

answered Feb 22 '19 at 19:00

Brandon Walton

179
1
2

2

Speaking only for Bootstrap 4 (I haven't looked at the older ones), surely you mean `.carousel .carousel-item { height: .....` , not `.carousel .item ` ? – Reversed Engineer Dec 28 '19 at 12:00
excellent answer for bootstrap 4 and above replace `.item` with `.carousel-item` as the comment above says. – Bobby Axe Aug 09 '20 at 20:30

score 9 · Answer 3 · answered Sep 04 '18 at 10:03

9

From Bootstrap 4

.carousel-item{
    height: 200px;
} 
.carousel-item img{
    height: 200px;
}

answered Sep 04 '18 at 10:03

Shailesh Bhardwaj

159
1
3

score 1 · Answer 4 · answered May 03 '20 at 14:26

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
 }
}

score 1 · Answer 5 · answered Nov 17 '21 at 11:20

if someone comes here looking exactly for what the headline points to, this will help (remember it's OK to use jQuery in Bootstrap v4):

$.fn.normalizeHeight = function () {
    $(this).css("height", Math.max.apply(null, $(this).children().map(function () {
        return $(this).height();
    })) + "px");

    return this;
};

It would simply be called with:

$("#slider .carousel-inner").normalizeHeight();

$(window).on('resize', function () {
  $("#slider .carousel-inner").normalizeHeight();
});

It is ES5 compliant + would work in other needed equal child height.

score -2 · Answer 6 · answered Aug 28 '20 at 07:16

-2

For Bootstrap 4

In the same line as image add height: 300px;

<img src="..." style="height: 300px;" class="d-block w-100" alt="image">

answered Aug 28 '20 at 07:16

Rayansh Gupta

1
1

score -2 · Answer 7 · edited Jun 11 '21 at 12:19

-2

Try following it should work:

.carousel .carousel-item {
    max-height:550px;
}

.carousel-item img {
    object-fit:cover;
    max-height:550px;
}

edited Jun 11 '21 at 12:19

mousetail

7,009
4
25
45

answered Jun 09 '21 at 13:32

william williams

103
1
7

Bootstrap change carousel height

7 Answers7

Linked