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 ca

Answer 1

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/

Answer 2

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.

Answer 3

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.

Answer 4

Now (on Boostrap 3 and 4) its simply :

.carousel-inner img {
  margin: auto;
}

Answer 5

By using this on bootstrap 3:

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

Answer 6

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