How to make the text on bootstrap carousel stay, while the images move?

Question

Basically, I got the carousel working, but I just want the image to transition but the text to be the same on each slide. Ideally the text wouldn't move, but the images would in the background.

Answer 1

Here's an example: http://www.bootply.com/pINPxqzlJ2

Use an absolute position an overlay element that you place before the carousel...

.overlay { 
  color:#fff;
  position:absolute;
  z-index:12;
  top:50%;
  left:0;
  width:100%;
  text-align:center;
}

Answer 2

Place a <div> outside of the carousel items and use the style='' to position it where over the carousel you want.

<div id="carousel" class="carousel slide">
     <!-- Wrapper for slides -->
        <div class="carousel-inner" >
                  <!-- items -->
        </div>
</div>
    <!-- text div -->
<div id = 'text' style='position:absolute; top:0; right:0;'>Hello, this goes in top right corner of screen over carousel</div>