title: Aligning responsive Bootstrap images with caption title text
body: <p>I have these 3 column images with title, caption ad icon that I couldn't align properly. Is there way fix the caption and title text according to the image width? What is the best practice to deal with these kind of content? Should I align the CSS for each screen size ?  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
   .urun-text {
    position: absolute;
    background-color: rgba(15, 15, 15, 0.93);
    color: #fff;
    bottom: 0px;
    text-align: left;
    padding: 20px 15px 20px 15px;
  }
  .urun-title {
    position: absolute;
    bottom: 80px;
    text-align: left;
    z-index: 15;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #fff;
    padding-left: 20px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    background-color: rgba(194, 0, 0, 0.93);
    width: 100%;
  }
  .click-arrow-right {
    position: absolute;
    z-index: 16;
    color: #fff;
    font-size: 10px;
    bottom: 0px;
    right: 33px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-4"&gt;
        &lt;div class="product-box"&gt;
          &lt;img src="http://i.imgur.com/xkAVZ3b.jpg" alt="Yeni Ürünler" class="align-center img-responsive"&gt;
          &lt;div class="urun-title"&gt;&lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt; YENİ ÜRÜNLER&lt;/div&gt;
          &lt;div class="urun-text"&gt;En yeni mobilya konseptlerini görmek için tıklayınız.&lt;/div&gt;
          &lt;div class="click-arrow-right"&gt;&lt;span class="glyphicon glyphicon-arrow-right"&gt;&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
        &lt;div class="product-box"&gt;
          &lt;img src="http://i.imgur.com/xkAVZ3b.jpg" alt="Yeni Ürünler" class="align-center img-responsive"&gt;
          &lt;div class="urun-title"&gt;&lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt; YENİ ÜRÜNLER&lt;/div&gt;
          &lt;div class="urun-text"&gt;En yeni mobilya konseptlerini görmek için tıklayınız.&lt;/div&gt;
          &lt;div class="click-arrow-right"&gt;&lt;span class="glyphicon glyphicon-arrow-right"&gt;&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
        &lt;div class="product-box"&gt;
          &lt;img src="http://i.imgur.com/xkAVZ3b.jpg" alt="Yeni Ürünler" class="align-center img-responsive"&gt;
          &lt;div class="urun-title"&gt;&lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt; YENİ ÜRÜNLER&lt;/div&gt;
          &lt;div class="urun-text"&gt;En yeni mobilya konseptlerini görmek için tıklayınız.&lt;/div&gt;
          &lt;div class="click-arrow-right"&gt;&lt;span class="glyphicon glyphicon-arrow-right"&gt;&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div</code></pre>
  </div>
  </div>
  </p>