Bootstrap 3 default Carousel: How to move indicators down and outside of slide container?

Question

What\'s an easy (and clean) way to move Bootstrap 3\'s carousel indicators down and outside of the slide container so it\'s not overlayed on the photos? See image below on where

Answer 1

Customize your item class div

 <div class="item">
     <div class="col-mid-1"> &nbsp; </div>
         <div class="col-md-10"> your content </div> 
             <!-- Note total should not be greater than 12 that is 1 + 10 + 1 = 12--> 
             <div class="col-mid-1"> &nbsp; </div>
 </div>

this worked for me when i don't want the icons on the content div

Answer 2

You can set border to 0px like this:

.carousel-indicators li{
  border: 0px;
}

Answer 3

You can write with:

.carousel-indicators {
  display:none;
}

Answer 4

You can push them below the slider like this...

.carousel-indicators {
  bottom:-50px;
}

Leave space below the carousel so that the pushed indicators don't interfere with content below the slider..

.carousel-inner {
   margin-bottom:50px;
}

Demo

Answer 5

you can simply add the bootstrap class hidden after the indicator class like this:

<ol class="carousel-indicators hidden">
<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>