Html – Aligning responsive Bootstrap images with caption title text

captioncsshtmlimagetwitter-bootstrap-3

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 ? 

@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;
}
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="product-box">
        <img src="http://i.imgur.com/xkAVZ3b.jpg" alt="Yeni Ürünler" class="align-center img-responsive">
        <div class="urun-title"><span class="glyphicon glyphicon-star"></span> YENİ ÜRÜNLER</div>
        <div class="urun-text">En yeni mobilya konseptlerini görmek için tıklayınız.</div>
        <div class="click-arrow-right"><span class="glyphicon glyphicon-arrow-right"></span>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="product-box">
        <img src="http://i.imgur.com/xkAVZ3b.jpg" alt="Yeni Ürünler" class="align-center img-responsive">
        <div class="urun-title"><span class="glyphicon glyphicon-star"></span> YENİ ÜRÜNLER</div>
        <div class="urun-text">En yeni mobilya konseptlerini görmek için tıklayınız.</div>
        <div class="click-arrow-right"><span class="glyphicon glyphicon-arrow-right"></span>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="product-box">
        <img src="http://i.imgur.com/xkAVZ3b.jpg" alt="Yeni Ürünler" class="align-center img-responsive">
        <div class="urun-title"><span class="glyphicon glyphicon-star"></span> YENİ ÜRÜNLER</div>
        <div class="urun-text">En yeni mobilya konseptlerini görmek için tıklayınız.</div>
        <div class="click-arrow-right"><span class="glyphicon glyphicon-arrow-right"></span>
        </div>
      </div>
    </div>
  </div>
  </div

Best Solution

Here you go

http://jsfiddle.net/ajruk60t/3/

.product-box { 
    display:inline-block;
    position:relative;
}

.urun-title {
    width:100%;

}

.urun-text {
    width:100%;

}

Setting the display to inline-block allows the .product-box to only be as wide as it's content (namely,the image), and position:relative allows us to set the width of the nested .urun-title and .urun-text elements to be 100% of the width of the .product-box.

Related Question