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

Are all of your images the same width? Also, do they stretch to their `.span6` container? — Andres I Perez, May 14 '12 at 22:03
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 '12 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. — WuTheFWasThat, Mar 14 '13 at 06:51
Perhaps hiding the email address would have been a good idea :) — Thomas Gak-Deluen, May 30 '15 at 12:21

score 162 · Answer 1 · edited Mar 05 '19 at 20:45

162

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

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

edited Mar 05 '19 at 20:45

rpm192

2,630
3
20
38

answered Mar 27 '13 at 13:59

atrepp

2,114
1
13
13

1

this worked for me! i've tried vekozlov method but didn't work, this works! thanks alot – ah-shiang han Jan 17 '14 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. – QuantumHive Apr 02 '15 at 08:20
Super! Hopefully this will just be 'built-in' BS class such as .carousel-img-center or something soon. – CodeFinity Jun 03 '15 at 04: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 '15 at 23:08
You should do `.carousel-inner > .carousel-item > img { margin: 0 auto; }` for Bootstrap 4. – Expenzor Oct 13 '16 at 22:59
`.carousel-inner > .item > a > img { margin: 0 auto; }` seems to have worked for me it was very close to @atrepp 's answer – petrosmm Nov 29 '16 at 17:15
For bootstrap-4 the solution is `.carousel-inner > .carousel-item > img { margin: 0 auto; }` – antonjs Jan 25 '18 at 15:12

dessalines · Answer 2 · 2016-08-01T16:08:32.810

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

edited Aug 01 '16 at 16:08

answered Aug 22 '14 at 18:37

dessalines

6,352
5
42
59

9

Tried the top voted solutions to no avail. This is much cleaner, simpler and worked. Thank you! – Kyle Dec 30 '14 at 04:13
2

Lean and clean. Thanks – chiefenne May 15 '17 at 20:53
2

Perfect thank you. I swear I googled this before and got no answer, this worked straight away. – Chud37 Aug 03 '17 at 07:21
I am using bootstrap 4 and the img-fluid class is not centering the images. They are all left justified. – Malchesador Nov 30 '17 at 20:11
I found this to work for me: .carousel-inner img { margin: auto; } – Malchesador Nov 30 '17 at 20:19
That's incorrect, you should use the text-center class. https://v4-alpha.getbootstrap.com/content/images/ – dessalines Dec 02 '17 at 15:56
@Malchesador I'm having the same issue - ever figure out a fix? – iaacp Mar 12 '18 at 00:24
2

@iaacp just add `text-center` to the `
` start tag
– deanwilliammills Dec 01 '18 at 06:23

score 18 · Answer 3 · edited Jun 09 '14 at 09:00

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

this css worked great for me, in addition to fixing the height of the images in the carousel — SporkInventor, Mar 17 '13 at 14:54

score 6 · Answer 4 · edited May 23 '17 at 12:18

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.

score 5 · Answer 5 · answered Apr 06 '19 at 10:45

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

score 1 · Answer 6 · answered May 15 '12 at 06:19

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

answered May 15 '12 at 06:19

Seb Cesbron

3,823
15
18

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 '12 at 18:42

score 1 · Answer 7 · answered Jun 22 '12 at 23:23

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>

score 1 · Answer 8 · answered Sep 17 '12 at 22:28

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

score 1 · Answer 9 · answered Aug 20 '15 at 18:02

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

score 1 · Answer 10 · edited Jun 28 '16 at 17:00

1

Try this

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

edited Jun 28 '16 at 17:00

I'm Geeker

4,601
5
22
41

answered Jun 28 '16 at 14:18

lala

45
1
1
5

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 '16 at 14:36

score 0 · Answer 11 · edited Dec 25 '12 at 07:53

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

score 0 · Answer 12 · answered Nov 27 '12 at 12:15

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

score 0 · Answer 13 · answered Mar 23 '13 at 09:01

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

Bootstrap Carousel image doesn't align properly

13 Answers13

Linked