Just a thought that has crossed my mind - I'm currently working on a carousel/slider using bootstrap and I am curious about how to change the location of the caption on each slide. I've experimented by adding an id along with the class but it did not yield the desired results, and renaming "carousel-caption" to something like "carousel-caption1" didn't work as expected. Is there a way to adjust the position of the captions on each slide so that they can be centered, at the bottom, or at the top, for instance?
Edit: Here's a link to my code pen with the carousel sample.
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">
<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>
<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>
<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>
<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>