Make Bootstrap's Carousel both center AND responsive?

Question

I want my carousel images to be at the center (horizontally), which is not by default. I follow the solution at this topic.

However, using this solution, when the carousel is resized and smaller than the image, the image is cropped instead of scaling as default.

How can I both center my image, but keep it to stretch to the carousel item?

OlivierLarue · Accepted Answer · 2021-08-30T13:44:18.957

75

Now (on Boostrap 3+) it's simply:

.carousel-inner img {
  margin: auto;
}

edited Aug 30 '21 at 13:44

answered Feb 01 '15 at 17:17

OlivierLarue

2,234
27
28

6

July 2015: Great answer which supersedes the accepted answer (for Bootstrap 3) in terms of simplicity. – Tony Cronin Jul 06 '15 at 07:36

score 34 · Answer 2 · edited May 23 '17 at 12:03

I assume you have different sized images. I tested this myself, and it works as you describe (always centered, images widths appropriately)

/*CSS*/
div.c-wrapper{
    width: 80%; /* for example */
    margin: auto;
}

.carousel-inner > .item > img, 
.carousel-inner > .item > a > img{
width: 100%; /* use this, or not */
margin: auto;
}

<!--html-->
<div class="c-wrapper">
<div id="carousel-example-generic" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/600x400">
      <div class="carousel-caption">
        hello
      </div>
    </div>
        <div class="item">
      <img src="http://placehold.it/500x400">
      <div class="carousel-caption">
        hello
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/700x400">
      <div class="carousel-caption">
        hello
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
  </a>
</div>
</div>

This creates a "jump" due to variable heights... to solve that, try something like this: Select the tallest image of a list

Or use media-query to set your own fixed height.

score 19 · Answer 3 · answered Aug 29 '17 at 09:13

19

On Boostrap 4 simply add mx-auto to your carousel image class.

<div class="carousel-item">
  <img class="d-block mx-auto" src="http://placehold.it/600x400" />
</div>

Combine with the samples from the bootstrap carousel documentation as desired.

answered Aug 29 '17 at 09:13

rox

201
2
5

3

the most elegant solution without adding any more custom class..... @rox can you explain what the d-block does – Ananda Feb 24 '20 at 11:18
d-block sets the css property { display: block }. Basically, this elements stacks vertically. – julianm Jul 16 '21 at 00:15

Adrian Cumpanasu · Answer 4 · 2014-03-22T19:08:05.760

3

add this

.carousel .item img {
   left: -9999px;  /*important */
   right: -9999px;  /*important */
   margin: 0 auto;  /*important */
   max-width: none;  /*important */
   min-width: 100%;
   position: absolute;
}

And of course one of the parent divs needs to have a position:relative, but I believe it does by default.

See it here: http://paginacrestinului.ro/

edited Mar 22 '14 at 19:08

answered Mar 22 '14 at 19:02

Adrian Cumpanasu

1,028
1
10
24

score 3 · Answer 5 · edited Oct 22 '14 at 07:21

3

Add a class to each image in the carousel html code, then with css apply margin: 0 auto.

edited Oct 22 '14 at 07:21

Mike

1,158
5
22
32

answered Oct 22 '14 at 07:02

Escendrix

33
4

score 3 · Answer 6 · answered Jan 13 '16 at 18:41

3

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

This simple solution worked for me

answered Jan 13 '16 at 18:41

FrickeFresh

1,688
1
19
31

khadim husen · Answer 7 · 2021-06-29T23:23:33.293

2

This work for me very simple just add attribute align="center". Tested on Bootstrap 4.

<!-- The slideshow -->
            <div class="carousel-inner" align="center">             
                <div class="carousel-item active">
                    <img src="image1.jpg" alt="no image" height="550">
                </div>
                <div class="carousel-item">
                    <img src="image2.jpg" alt="no image" height="550">
                </div>                
                <div class="carousel-item">
                    <img src="image3.png" alt="no image" height="550">
                </div>
             </div>

Edit:-

align attribute is deprecated, use CSS property.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/align

edited Jun 29 '21 at 23:23

answered Apr 03 '20 at 19:44

khadim husen

136
1
10

Works with BS5 too – Ajmal PraveeN Jun 29 '21 at 17:49
Don't use this solution as this is deprecated. – khadim husen Jun 29 '21 at 23:24
But its working on Chrome 91.0.4472.124 with BS5, Is there any simple solution alternative to this ? – Ajmal PraveeN Jun 30 '21 at 06:24
yes this is working. But this is deprecated. so in future this may not work and you have to change code that time. so it is better not to use. – khadim husen Jun 30 '21 at 13:48
Yes I got, but I want to know what was the alternative solution ? If you got idea Can you share – Ajmal PraveeN Jul 01 '21 at 16:05

score 1 · Answer 8 · answered Jul 21 '15 at 00:42

1

Was having a very similar issue to this while using a CMS but it was not resolving with the above solution. What I did to solve it is put the following in the applicable css:

background-size: cover

and for placement purposes in case you are using bootstrap, I used:

background-position: center center /* or whatever position you wanted */

answered Jul 21 '15 at 00:42

Joe Connor

11
1

Is this really a solution ? – Rohit Gupta Jul 21 '15 at 00:47

score 1 · Answer 9 · edited Nov 17 '16 at 05:22

1

By using this on bootstrap 3:

#carousel-example-generic{
    margin:auto;
}

edited Nov 17 '16 at 05:22

abpatil

916
16
20

answered Nov 17 '16 at 04:02

Vince2017

11
3

score 1 · Answer 10 · answered Jul 17 '18 at 22:39

None of the above solutions worked for me. It's possible that there were some other styles conflicting.

For myself, the following worked, hopefully it may help someone else. I'm using bootstrap 4.

.carousel-inner img {       
   display:block;
   height: auto; 
   max-width: 100%;
}

score 0 · Answer 11 · answered Oct 25 '13 at 06:54

0

Try giving a Width in % to the image in the carousel?

.item img {
    width:100%;
}

answered Oct 25 '13 at 06:54

Kevinvhengst

1,672
4
27
40

that would not let the image be larger than the body in case you have a fixed height. So the image would get streched. – Adrian Cumpanasu Apr 14 '14 at 10:10

score 0 · Answer 12 · answered Aug 28 '15 at 14:33

0

I've placed the <div class="carousel" id...> inside another div with the class container (<div class="container"><div class="carousel" id="my-carousel">...</div></div>). That solved it too.

answered Aug 28 '15 at 14:33

ArtFranco

300
3
10

score 0 · Answer 13 · answered Nov 21 '16 at 05:09

in bootstrap v4, i center and fill the carousel img to the screen using

<img class="d-block mx-auto" max-width="100%" max-height="100%">

pretty sure this requires parent elements' height or width to be set

html,body{height:100%;}
.carousel,.carousel-item,.active{height:100%;}
.carousel-inner{height:100%;}

Make Bootstrap's Carousel both center AND responsive?

13 Answers13

Linked