97

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 border properly.

But the carousel example provided by bootstrap always works fine, no matter the width of the window. Following the code.

Can someone explain why carousel is behaving differently? Is this anything to do with Image size or some bootstrap config is missing?

<section id="carousel">
<div class="hero-unit span6 columns">
    <h2>Welcome to TACT !</h2>
    <div id="myCarousel" class="carousel  slide" >
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="item  active" >
            <img alt=""  src="/eboxapps/img/3pp-1.png">
            <div class="carousel-caption">
                <h4>1. Need a 3rd party jar?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-2.png">
            <div class="carousel-caption">
                <h4>2. Create Request</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-3.png">
            <div class="carousel-caption">
                <h4>3. What happens?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-4.png">
            <div class="carousel-caption">
                <h4>4. Status is Emailed</h4>
            </div>
        </div>
      </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>
</div>

carousel image

4
  • Are all of your images the same width? Also, do they stretch to their .span6 container? May 14, 2012 at 22:03
  • 1
    all of my images are same width and height. All of them seem to stretch. To try to fix, I tried creating images that with the same size as provided by the bootstrap example. But, it completely messed up the size. So, I thinking there is a link between the image size and css styling. But, the documentation doesn't describe the relationship fully.
    – Nambi
    May 14, 2012 at 22:23
  • I ran into this problem also, and it was quite frustrating. For me, it turned out it was happening because the div containing the carousel had a fixed width that was wider than the carousel. Mar 14, 2013 at 6:51
  • Perhaps hiding the email address would have been a good idea :) May 30, 2015 at 12:21

13 Answers 13

162

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

.carousel-inner > .item > img {
  margin: 0 auto;
}
7
  • 1
    this worked for me! i've tried vekozlov method but didn't work, this works! thanks alot Jan 17, 2014 at 11:44
  • The height of the carousel changes for different heights of images, so you would need to define a fixed width in css. Apr 2, 2015 at 8:20
  • Super! Hopefully this will just be 'built-in' BS class such as .carousel-img-center or something soon.
    – CodeFinity
    Jun 3, 2015 at 4:33
  • I will try the margin but I found adding height:none to .carousel-inner > .item > img gets better results for than the default height:500px
    – CrandellWS
    Jul 27, 2015 at 23:08
  • You should do .carousel-inner > .carousel-item > img { margin: 0 auto; } for Bootstrap 4.
    – Expenzor
    Oct 13, 2016 at 22:59
128

With bootstrap 3, just add the responsive and center classes:

 <img class="img-responsive center-block" src="img/....jpg" alt="First slide">

This automatically does image resizing, and centers the picture.

Edit:

With bootstrap 4, just add the img-fluid class

<img class="img-fluid" src="img/....jpg">
8
  • 9
    Tried the top voted solutions to no avail. This is much cleaner, simpler and worked. Thank you!
    – Kyle
    Dec 30, 2014 at 4:13
  • 2
    Lean and clean. Thanks
    – chiefenne
    May 15, 2017 at 20:53
  • 2
    Perfect thank you. I swear I googled this before and got no answer, this worked straight away.
    – Chud37
    Aug 3, 2017 at 7:21
  • I am using bootstrap 4 and the img-fluid class is not centering the images. They are all left justified. Nov 30, 2017 at 20:11
  • 2
    @iaacp just add text-center to the <div class="carousel-item"> start tag Dec 1, 2018 at 6:23
18

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;
    }
}
1
  • this css worked great for me, in addition to fixing the height of the images in the carousel Mar 17, 2013 at 14:54
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.

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;
}
1

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

1
  • it doesn't help. Do you think the image format matters? The bootstrap example uses JPEG files, where I am using PNG files. Does that make any difference.
    – Nambi
    May 15, 2012 at 18:42
1

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>
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~~

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;
}
1

Try this

    .item img{
      max-height: 300px;
      margin: auto;
    }
1
  • Welcome to StackOverflow! Your answer could benefit a lot if you'd explain a little how this solves the question. Code-only answers are not so well received on SO.
    – René Vogt
    Jun 28, 2016 at 14:36
0

@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.

0

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

0

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];
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.