Twitter Bootstrap: Have carousel images full width and height

Question

this seems as a trivial question but after a couple of hours fiddling with the Twitter Bootstrap carousel in their example (http://twitter.github.io/bootstrap/examples/carousel.html) I resort to SO for some help.

I want the carousel to display the full width (as now) but not with a cropped height. I have tried setting min-height, height etc. to 100% in different containers but with no result. Any two cents?

The link from the question has been moved here: [Carousel Template - Bootstrap](http://getbootstrap.com/2.3.2/examples/carousel.html) — julian soro, May 14 '14 at 22:11

score 17 · Answer 1 · answered Sep 04 '15 at 16:24

17

For Bootstrap 3, all you need is:

.carousel img {
    min-width: 100%;
}

answered Sep 04 '15 at 16:24

Nate Beers

1,355
2
13
22

score 8 · Answer 2 · answered May 08 '13 at 11:06

From the example carousel on the bootstrap site, if you resize the browser window you'll see that the image is actually being stretched in the x-axis. To accomplish the same effect, use their CSS:

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

The last two attributes, min-width and height, are of importance. The height is set to the desired size of the carousel.

Finally, you will want to use img tags to place your image, rather than a background-image. Here's a fuller example:

<div class="item">
    <img src="image.jpg" />
    <div class="container">
        <div class="carousel-caption">
            <h1>Header</h1>
            <p class="lead">This is a caption</p>
            <a class="btn btn-large btn-primary" href="#">Large Button</a>
        </div>
    </div>
</div>

I hope this helps. Cheers!

I should add that this code snippet was for Bootstrap v2, which might not be compatible with later versions of Bootstrap — julian soro, May 14 '14 at 22:10

score 1 · Answer 3 · answered Sep 10 '14 at 04:57

Think I have got a solution with simple CSS changes? Just change the following from (OLD) to;

    .carousel {
  /*height: 500px; OLD*/
  /*margin-bottom: 60px; OLD*/

  /*max-width:1200px; THIS IS OPTIONAL (ANY SIZE YOU LIKE)*/
  margin:0 auto 60px;
}

.carousel .item {
    /*height: 500px; OLD*/
    /*background-color: #777; OLD*/

    width:100%;
    height:auto;
}
.carousel-inner > .item > img {
  /*position: absolute; OLD+WHY?*/
  /*top: 0; OLD+WHY?*/
  /*left: 0; OLD+WHY?*/

  min-width:100%;
  height:auto;
}

score 1 · Answer 4 · edited Mar 06 '15 at 20:55

1

Use the following for each image you want to insert in the slide:

<img class="img-responsive center-block" src="#">

edited Mar 06 '15 at 20:55

Fish Below the Ice

1,273
13
23

answered Mar 06 '15 at 20:09

Becky

11
2

score 1 · Answer 5 · edited Feb 28 '17 at 11:44

Though this dates back 3 years, solution given by 'Nate Beers' solved my problem, when using Bootstrap 3.3.7

Its because 'max-width' sets the maximum width of the element which overrides width property when width is greater than max-width.

Also 'min-width' always overrides the 'max-width'.

Here is an example in codepen, resize the preview window to see how it works.

Check the below element in particular by resizing to the smallest possible width and compare with 2 other elements i1 and i2.

<div class="i3">Sample</div>

score -2 · Answer 6 · edited Nov 16 '13 at 03:06

-2

You can simply change their css to this but it will cause your image to crop of what doesn't fit:

.carousel-inner > .item > img {
   position: absolute;
   top: 0;
   left: 0;
   min-width: 100%;
   min-height: 500px; /* <--- Change this line to min-height */
 }

edited Nov 16 '13 at 03:06

tckmn

57,719
27
114
156

answered Nov 16 '13 at 02:44

user2998469

1

Twitter Bootstrap: Have carousel images full width and height

6 Answers6

Linked