Text Overlay with Doubt Bootstrap

Question

I’m trying to make a text overlay on an image with bootstrap, but I’m not getting it.

Someone would know how to do and help me?

My code is:

<section class="container">
  <div class="row ptf">
   	<div class="col-sm-4">
    	<img src="imagens/evidence.png" class="img-responsive" />
    </div>
    <div class="col-sm-4">
    	<img src="imagens/evidence.png" class="img-responsive" />
    </div>
    <div class="col-sm-4">
    	<img src="imagens/evidence.png" class="img-responsive" />
    </div>
  </div>
</section>

Answer 1

You can do it like this:

.image {
  position: relative;
  width: 100%;
}
h2 {
  position: absolute;
  top: 200px;
  left: 0;
  width: 100%;
}
h2 span {
  color: white;
  font: bold 24px/45px Helvetica, Sans-Serif;
  letter-spacing: -1px;
  background: rgb(0, 0, 0);
  /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
}

<div class="image">
  <img src="http://lorempixel.com/image_output/people-q-g-640-480-10.jpg" alt="" />
  <h2>
    <span>Vamos Ajudar!<span class='spacer'></span><br />
    <span class='spacer'></span>doe alimentos e não cachaça!</span>
  </h2>
</div>