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 am facing the same problem with you. Based on the hint of @thuliha, the following codes has solved my issues.

In the html file, modify as the following sample:

<img class="img-responsive center-block" src=".....png" alt="Third slide">

In the carousel.css, modify the class:

.carousel .item {
  text-align: center;
  height: 470px;
  background-color: #777;
}

Answer 2

For the carousel, I believe all images have to be exactly the same height and width.

Also, when you refer back to the scaffolding page from bootstrap, I'm pretty sure that span16 = 940px. With this in mind, I think we can assume that if you have a

<div class="row">
     <div class="span4"> 
        <!--left content div guessing around 235px in width -->
     </div>
     <div class="span8">
        <!--right content div guessing around 470px in width -->
     </div>
</div>

So yes, you have to be careful when setting the spans space within a row because if the image width is to large, it will send your div over into the next "row" and that is no fun :P

Link 1

Answer 3

I faced the same problem and solved it this way: It's possible to insert non-image content to Carousel, so we can use it. You should first insert div.inner-item (where you will make center alignment), and then insert image inside this div.

Here is my code (Ruby):

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <%= image_tag "couples/1.jpg" %>
        </div> 
        <% (2..55).each do |t|%>
            <div class="item">
                <div class='inner-item'>
                    <%= image_tag "couples/#{t}.jpg" %>
                </div>
            </div> 
        <% end -%>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

And my css-code(.scss):

.inner-item {
    text-align: center;
    img {
        margin: 0 auto;
    }
}

Answer 4

Try this

    .item img{
      max-height: 300px;
      margin: auto;
    }

Answer 5

In Bootstrap 4, you can add mx-auto class to your img tag.

For instance, if your image has a width of 75%, it should look like this:

<img class="d-block w-75 mx-auto" src="image.jpg" alt="First slide">

Bootstrap will automatically translate mx-auto to:

ml-auto, .mx-auto {
    margin-left: auto !important;
}

.mr-auto, .mx-auto {
    margin-right: auto !important;
}

Answer 6

Does your images have exactly a 460px width as the span6 ? In my case, with different image sizes, I put a height attribute on my images to be sure they are all the same height and the carousel don't resize between images.

In your case, try to set a height so the ratio between this height and the width of your carousel-inner div is the same as the aspectRatio of your images