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 I want to move the indicators.

Link to live code

<div class="container">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- 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/1170x300.jpg" alt="...">
            </div>

            <div class="item">
                <img src="http://placehold.it/1170x300.jpg" alt="...">
            </div>

            <div class="item">
                <img src="http://placehold.it/1170x300.jpg" alt="...">
            </div>

        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>

</div><!--//container -->

Herodotus

Answer 1

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

Oxidize

Answer 2

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>

Thymic

Answer 3

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

Cordie

Answer 4

The issue is that indicators are absolute positioned, so you could fix it by making the element ol.carousel-indicators relative positioned.

<ol class="carousel-indicators" style="position: relative;">
  <li style="background-color: grey;" data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li style="background-color: grey;" data-target="#carousel-example-generic" data-slide-to="1"></li>
  <li style="background-color: grey;" data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

Now indicators are part of the flow, so you should push indicators code down after div#carousel-example-generic.

Here is a working example.

<div class="container">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin-bottom: 3rem;">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://rotulosmatesanz.com/wp-content/uploads/2017/09/2000px-Google_G_Logo.svg_.png" alt="..." />
      </div>

      <div class="item">
        <img src="https://rotulosmatesanz.com/wp-content/uploads/2017/09/2000px-Google_G_Logo.svg_.png" alt="..." />
      </div>

      <div class="item">
        <img src="https://rotulosmatesanz.com/wp-content/uploads/2017/09/2000px-Google_G_Logo.svg_.png" alt="..." />
      </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

  </div>
  <!-- Indicators -->
  <ol class="carousel-indicators" style="position: relative;">
    <li style="background-color: grey;" data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li style="background-color: grey;" data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li style="background-color: grey;" data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
</div>
<!--//container -->

I added some styling to make the change more apparent, like margin-bottom to div#carousel-example-generic, added background-color: grey to list items, and added some images from the web to get it to work.

That simple change should do the work.

The advantage of this approach versus the accepted answer, is that you don't have to guess how much margin to apply to push indicators down, because indicators are part of the flow and will move content around as needed.

Result demo, made using Bootstrap 5 (I also pushed carousel captions out of the slideshow)

Convergence

Answer 5

You can set border to 0px like this:

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

Guilty

Answer 6

You can write with:

.carousel-indicators {
  display:none;
}

Bestead

this doesn't answer the Question. – Vander

This will hide the indecators, he just want them outside the slide container. – Trustless