Adding text over an image in Bootstrap carousel

Question

I have a carousel with an image that i would like to put text over, but it is not working. The text appears under the image instead of overlayed on top of it

<!-- WRAPPER FOR SLIDES -->
                    <div class="carousel-inner">
                        <div class="active item">
                            <div class="carousel-content">
                                <img src="img/Slide 1.jpg" alt="..." position="relative">
                                <p>TEST</p>
                            </div>

                            <div class="carousel-caption">
                                <h3>What we do</h3>
                            </div>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1200x315" alt="...">
                            <div class="carousel-caption">
                                <h3>What we Do</h3>
                            </div>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1200x315" alt="...">
                            <div class="carousel-caption">
                                <h3>Who we Are</h3>
                            </div>
                        </div>
                    </div>

Solution 1

You could simply position the element absolutely just like built-in captions and set the top/bottom, left/right offsets.

Note that the carousel captions have z-index: 10 by default, so you may want to give the positioned element a higher z-index:

For instance:

.carousel-content {
  position: absolute;
  bottom: 10%;
  left: 5%;
  z-index: 20;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

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

  <div class="carousel-inner">
    <div class="active item">
      <img src="http://lorempixel.com/1200/315" alt="...">
      <div class="carousel-content">
        <p>TEST</p>
      </div>
      <div class="carousel-caption">
        <h3>What we do</h3>
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x315" alt="...">
      <div class="carousel-caption">
        <h3>What we Do</h3>
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x315" alt="...">
      <div class="carousel-caption">
        <h3>Who we Are</h3>
      </div>
    </div>
  </div>
</div>

Solution 2

Here is a possible solution:

jsfiddle: http://jsfiddle.net/38v09vha/

            <div class="carousel-inner">
                <div class="item">
                    <img src="http://placehold.it/1200x315" alt="...">
                    <div class="absolute-div">
                        <div class="carousel-caption">
                            <h3>What we Do</h3>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="http://placehold.it/1200x315" alt="...">
                    <div class="absolute-div">
                        <div class="carousel-caption">
                            <h3>What we Do</h3>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="http://placehold.it/1200x315" alt="...">
                    <div class="absolute-div">
                        <div class="carousel-caption">
                            <h3>What we Do</h3>
                        </div>
                    </div>
                </div>
           </div>

and css:

.carousel-caption {
    position: absolute;
    z-index: 1;
    display:table;
    width:100%;
    height:100%;
}

.absolute-div {
    position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
}

.carousel-caption h3 {
    display:table-cell;
    vertical-align: middle;
    text-align:center;
}

.item {
    position:relative;
}

Assuming that you want them vertically aligned in the middle of the image—Basically, you'll want to relatively position the slide-items parent div, which will inherit it's height from the combined height of the image and the text. Then, you'll want to create a div that houses the text which has the css attribute position: absolute. This element will be a direct child of the relatively positioned parent. This will allow you to absolutely position your text within the nearest relatively positioned element. See this CSS Tricks tutorial to understand how this works.

This will allow you to position the text over the image, I then went ahead and used table positioning to allow you to vertically center them, although you could go ahead and place them over the image wherever you like.

Solution 3

Hope it help someone, in my case i did it with the following code :

<style>
.carousel-caption {
    position: absolute;
    z-index: 1;
    display:table;
    width:100%;
    height:100%;
}

.carousel-caption div {
    display:table-cell;
    vertical-align: middle;
    text-align:center;
}

.trickcenter {
    position: fixed;
    top: 84%; // 50% for perfect centering
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>

<div class="item">
    <img src="images/slider_T02.jpg" alt="Moto de collection">
    <div class="carousel-caption trickcenter">
        <div>HERE THE TEXT YOU WANT</div>
    </div>
</div>

<div class="item">
    <img src="images/slider_T03.jpg" alt="Véhicule Haut de Gamme">
    <div class="carousel-caption trickcenter">
        <div>HERE THE SECOND TEXT</div>
    </div>
</div>