CODEWITHSUNDEEP
htmlcssimagetwitter-bootstraptwitter-bootstrap-3
Luke Vo
Luke Vo

Reputation: 20658

Make Bootstrap's Carousel both center AND responsive?

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?

Upvotes: 39

Views: 185326

Answers (13)

OlivierLarue
OlivierLarue

Reputation: 2410

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

.carousel-inner img {
  margin: auto;
}

Upvotes: 77

khadim husen
khadim husen

Reputation: 146

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

Upvotes: 2

Gabe Gates
Gabe Gates

Reputation: 1000

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

Upvotes: 1

rox
rox

Reputation: 211

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.

Upvotes: 20

austin
austin

Reputation: 1008

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

Upvotes: 0

Vince2017
Vince2017

Reputation: 11

By using this on bootstrap 3:

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

Upvotes: 1

FrickeFresh
FrickeFresh

Reputation: 1748

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

This simple solution worked for me

Upvotes: 3

ArtFranco
ArtFranco

Reputation: 360

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.

Upvotes: 0

Joe Connor
Joe Connor

Reputation: 11

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

Upvotes: 1

Escendrix
Escendrix

Reputation: 33

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

Upvotes: 3

user2897448
user2897448

Reputation:

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/

Upvotes: 3

Ryan
Ryan

Reputation: 6239

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.

Upvotes: 34

Kevinvhengst
Kevinvhengst

Reputation: 1702

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

.item img {
    width:100%;
}

Upvotes: 0

Related Questions