This is just a general question I suppose. I'm creating a carousel/slider using bootstrap and I want to know how to make the caption on each slide change in placement. I've tried creating an id to go along with the class with no luck and changing the carousel-caption to say: "carousel-caption1" affects it completely. How can I change the position of the captions on each slide to have, for example, one caption that is in the center, one that is on the bottom, one on the top, etc.
Edit: Here is a code pen with my carousel.
http://codepen.io/lubidia13/pen/MbQvOa
<div class="container">
<header>
<img class="banner" src="http://placehold.it/1349x150">
<div class="gender">
<h3> Gender Identity </h3>
</div>
</header>
<div id="wrap">
<div id="tabwrap">
<ul id="tabs">
<li >
<a href="#bacon" class="cyan">Terms</a>
</li>
<li>
<a href="#batfish" class="green">Resources</a>
</li>
<li>
<a href="#tuna" class="lav">Culture</a>
</li>
<li>
<a href="#sausage" class="teal">Share</a>
</li>
</ul>
<div id="content">
<div id="bacon" class="animated"> <p>Bacon ipsum dolor amet ribeye short loin leberkas andouille jerky meatloaf pork spare ribs corned beef. Andouille ham hock ground round, shankle pastrami rump hamburger filet mignon. </p></div>
<div id="batfish" class="animated"><p>Batfish warmouth orbicular combtooth blenny; madtom, knifefish handfish rock beauty armorhead frogfish. Cownose ray pupfish pencilfish char fangtooth marblefish longfin dragonfish armored searobin hamlet.</p></div>
<div id="tuna" class="animated"><p>Tuna, sculpin squeaker rice eel, lamprey triggerfish mooneye African glass catfish, loach wolf-eel yellowhead jawfish grass carp sea dragon neon tetra. Fingerfish forehead brooder sarcastic fringehead sixgill ray, scaly dragonfish bluntnose minnow.</p></div>
<div id="sausage" class="animated"> <p>Sausage ground round sirloin ham hock t-bone tongue strip steak meatloaf landjaeger shankle andouille. Turducken doner brisket, shank salami shoulder kevin filet mignon ball tip chicken.</p>
</div> <!-- End of Div-->
</div> <!-- End of Div-->
</div><!-- End of Div-->
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://unsplash.it/1250/750?image=114">
</div>
<div class="item">
<img src="http://placehold.it/1250x750">
</div>
<div class="item">
<img src="https://unsplash.it/1250/750?image=315">
</div>
<div class="item">
<img src="https://unsplash.it/1250/750?image=622">
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Delete This -->
<footer class="info">
<a href="#"> Home</a> |
<a href="#"> Terms </a> | <a href="#">Media</a> | <a href="#">Share</a>
<p | 2016 | Web Design</p>
</footer>
<!-- End of Container -->
