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

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