Twitter Bootstrap Responsive Carousel With Multiple Items

Question

I'm trying to setup Twitter Bootstrap carousel with multiple items while maintaining the responsiveness.

I have a jsfiddle for testing setup http://jsfiddle.net/Va8Un/

What I would like to happen is to display 4 images each with caption to hold item titles and so forth within a carousel pane and they should be resized to fit the screen to stay on the same row at all times. Right now it's completely ignoring any attempts I make to adjust the image size to the screen, I figured setting the img max-width:100%; would do the trick but it doesn't seem to effect it. Moreover, the 4th image is being pushed to a second row because the images aren't resizing:

enter image description here

Any way to fix this with pure CSS or should I look for options beyond Twitter Bootstrap?

You can view the result here: http://jsfiddle.net/Va8Un/embedded/result/

Here is the HTML:

Andres I Perez · Accepted Answer

You can do this with the bootstrap fluid grid alone, just specify a .container-fluid container along with a .row-fluid row and give each one of your list items housing an image a .span* class, in this case 3 (3*4=12).

.container {
  margin-top: 10px;
}

img
{
  max-width:100%;   
}

Demo: http://jsfiddle.net/Va8Un/10/

EDIT: here is the demo with corrections http://jsfiddle.net/Va8Un/550/

Twitter Bootstrap Responsive Carousel With Multiple Items

Answers (2)

Related Questions