Bootstrap 3 CSS image caption overlay

Question

I use bootstrap and having a problem to overlay caption over an image, the caption div just cannot fit within the box, as shown below:

HTML:

<div class="col-sm-4">
    <a href="#">
        <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" />
        <div class="desc">
            <p class="desc_content">The pack, the basic unit of wolf social life.</p>
        </div>
    </a>
</div>

<div class="col-sm-4">
    <a href="#">
        <img src="images/upload/projects/21/cake.png" class="img-responsive" alt="">
        <div class="desc">
            <p class="desc_content">The pack, the basic unit of wolf social life.</p>
        </div>
    </a>
</div>

CSS:

div.desc{
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: #000;
    color: #fff;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

SOLUTION:

Thanks to @himanshu to solved the issue.

div.desc{
    background-color: #000;
    bottom: 0;
    color: #fff;
    left: 0;
    opacity: 0.5;
    position: absolute;
    width: 100%;
}

.fix{
    width: 100%;
    padding: 0px;
}

Answer 1

This is what works for me. With this you will find the caption at the bottom of the image.

<div class="container-fluid">   
    <img src="someimg.jpg" class="img-fluid " alt="Patience">   
    <div class="carousel-caption d-block">
        <h1>Some label</h1>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
</div>

if you want it at the top then in your CSS do the following:

.carousel-caption{
top:0;
bottom:auto;
}

Answer 2

For others trying to overlay a caption on an image in Bootstrap, consider using carousel captions.

See here: http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

  <div class="carousel-caption">
    <h3>Chania</h3>
    <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
  </div>