Aligning responsive Bootstrap images with caption title text - html

Question

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

Answer 1

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.