Menu
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?
315
You have to set the height of the outer div with id="myCarousel" to 100%. So add it in the css file or in the html file. Too use the full height you need to set the height of the <html> and <body> to 100% (often the first two classes in a css file).
To make it full-width we don't use any Bootstrap “container” or “row”, just the carousel which I have placed inside a “div” tag (class “top-content”) with a 100% width. The images I've used are 1920 pixels wide so they should cover pretty much every type of device.
For Bootstrap 3, all you need is:
.carousel img {
min-width: 100%;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With