Bootstrap Carousel image doesn't align properly

Question

Please take a look at the following image, we are using bootstrap carousel to rotate the images. However, when the window width is large, the image doesn\'t align with the b

Answer 1

I think I have a solution:

In your personal style sheet page, assign the width & height to match your image dimensions.

Create an additional separate "class" on that top div that appropriates the space with spans...(Shown below)

        <div class="span6 columns" class="carousel">
            <div id="myCarousel" class="carousel slide">
                <div class="carousel-inner">
                <div class="item active">

Without touching the bootstrap.css, in your own style sheet, call "carousel"(or whatever label you choose) to match the width and height of your original pix!

.carousel       {
            width: 320px;
            height: 200px;

}

So in my case, I am using small 320x200 images to carousel with. There is probably preset dimensions in the bootstrap.css, but I don't like changing that so I can try to stay current with future releases. Hope this helps~~

Answer 2

@Art L. Richards 's solution didn't work out. now in bootstrap.css, original code has become like this.

.carousel .item > img {
  display: block;
  line-height: 1;
}

@rnaka530 's code would break the fluid feature of bootstrap.

I don't have a good solution but I did fix it. I observed the bootstrap's carousel example very carefully http://twitter.github.com/bootstrap/javascript.html#carousel.

I find out that img width has to be larger than the grid width. In span9, width is up to 870px, so you have to prepare a image larger than 870px. If you have more container outside the img, as all the container has border or margin something, you can use image with smaller width.

Answer 3

Insert this on the css parent div class where your carousel is.

<div class="parent_div">
     <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
              <div class="item active">
                <img src="assets/img/slider_1.png" alt="">
                <div class="carousel-caption">
                </div>
              </div>
            </div>
     </div>      
</div>

CSS

.parent_div { 
margin: 0 auto;
min-width: [desired width];
max-width: [desired width];
}

Answer 4

The solution is to put this CSS code into your custom CSS file:

.carousel-inner > .item > img {
  margin: 0 auto;
}

Answer 5

It could have something to do with your styles. In my case, I am using a link within the parent "item" div, so I had to change my stylesheet to say the following:

.carousel .item a > img {
  display: block;
  line-height: 1;
}

under the preexisting boostrap code:

.carousel .item > img {
  display: block;
  line-height: 1;
}

and my image looks like:

<div class="active item" id="2"><a href="http://epdining.com/eats.php?place=TestRestaurant1"><img src="rimages/2.jpg"></a><div class="carousel-caption"><p>This restaurant is featured blah blah blah blah blah.</p></div></div>

Answer 6

While vekozlov's answer will work in Bootstrap 3 to center your image, it will break when the carousel is scaled down: the image retains its size instead of scaling down with the carousel.

Instead, do this on the top-level carousel div:

<div id="my-carousel" class="carousel slide"
    style="max-width: 900px; margin: 0 auto">
    ...
</div>

This will center the entire carousel and prevent it from growing beyond the width of your images (i.e. 900 px or whatever you want to set it to). However, when the carousel is scaled down the images scale down with it.

You should put this styling info in your CSS/LESS file, of course.