user2948950 user2948950 - 29 days ago 4x
CSS Question

Make an image center on the page with bootstrap

I am using the latest version of bootstrap and I am trying to get my image dead center on the page in a carousel.

I placed the

class in the main div of the carousel but it is still off centered to the left of the page?

Example of off centering of carousel

My code for the carousel is below:

<!-- Main Carousel -->
<div id="carousel-example-generic" class="carousel slide container" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/carousel/slide01.jpg" alt="Ants climbing on grass">
<div class="carousel-caption">
Ants climbing on grass
<!-- End Main Carousel -->

From what I found on the internet is that the
class is supposed to center everything on the page. So what has happened here, and how can I fix it?

I also tried wrapping the entire carousel around the following code, but the same result was achieved.

<div class="container">
<!-- Carousel inside here -->


For Bootstrap 3, class="img-responsive center-block" will do it.

Just add it for all your images like so: <img class="img-responsive center-block" src="assets/img/carousel/slide01.jpg">