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 -->

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