Clarissa Clarissa - 2 months ago 16
CSS Question

Bootstrap Carousel Alignment

I created a Bootstrap Carousel in my home page, after some text information. I do not want a big Carousel in my page, so I decreased the size using

<div class="col-sm-6">
.
But my Carousel is positioned on the left side of the page and I was not able to center it. I would like to have it in the center of my page.
The code that I used was:

<div class="container">
<h4 class="text-justify">text here </h4>
</div>

<div class="container">
<div class="col-sm-6">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="https://upload.wikimedia.org/xx.JPG" alt=""></div>
<div class="item"><img src="https://upload.wikimedia.org/wikipedia/xxxx.JPG" alt=""></div>
</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span></a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div></div></div>


My CSS code was

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}


How can I change the position?

Thanks
Clarissa

Answer

First you have to place your col-sm-6 inside a row, then you can simply add a class "col-centered" and add the following CSS

.col-centered{
   float: none;
   margin: 0 auto;
}

Your final code will be like this:

<div class="container">
  <h4 class="text-justify">text here </h4>
</div>

<div class="container">
<div class="row">
 <div class="col-sm-6 col-centered">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active"><img src="https://upload.wikimedia.org/xx.JPG" alt=""></div>
      <div class="item"><img src="https://upload.wikimedia.org/wikipedia/xxxx.JPG" alt=""></div>
      </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span></a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>    
    </div>
  </div>
</div>
 </div>