CODEWITHSUNDEEP
htmlcsstwitter-bootstrapthumbnailscaption
fyr91
fyr91

Reputation: 1293

Bootstrap, how to align the caption to the right of the image within the thumbnail in a right way and align the button to the bottom of the caption?

As asked in the title, I am creating a website by using bootstrap v3.3.2.

The first question is that I am using the grid system to align the caption to the right of the thumbnail as shown below:

<div class="container">

    <div class="thumbnail">

        <div class="row">

            <div class="col-md-6">

                <a href="#">

                    <img class="img-responsive" src="images/pic.jpg">

                </a>

            </div>

            <div class="col-md-6">

                <div class="caption">

                    <h2>Title</h2>

                    <hr>

                    <p>A design specification provides explicit information about the requirements for a product and how the product is to be put together. It is the most traditional kind of specification, having been used historically in public contracting for buildings, highways, and other public works, and represents the kind of thinking in which architects and engineers have been trained.</p>

                    <hr>

                    <p class="caption-footer">

                        <a href="#" class="btn"><span class="glyphicon glyphicon-heart"></span> Like it</a>

                        <a href="#" class="btn"><span class="glyphicon glyphicon-share"></span> Share it</a>

                    </p>

                </div>

            </div>

        </div>

    </div>

</div>

Which turns out to be something like this:

enter image description here

As noticed, there is a large margin to the left of the image, which is not ideal. And when I resize the screen, it became more undesirable, with large margin to both side as shown below:

enter image description here

I think this may caused by the grid system since the col-md-6 has a fixed width. However I do not know how to fixe this.

The second question is that I try to align the two buttons to the bottom of the caption by adding a new class called caption-footer. However, this does not work.

Below is my CSS file for class caption-footer and how it turns out to be:

caption-footer{
  position: absolute;
  bottom:0;
  left: 0;
}

enter image description here

I have checked quite a few links here (like: link1 link2). But none of them seems to work for my case.

Thanks in advance for any help!

Upvotes: 0

Views: 4537

Answers (1)

Rohan Sharma
Rohan Sharma

Reputation: 21

One thing you can do simply place caption under col-md-12 div and buttons under another col-md-12 div.

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <a href="pulpitrock.jpg" class="thumbnail">
        <p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>    
        <img src="pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213">
      </a>
    </div>
    <div class="col-md-6">
      <div class="col-md-12">
           A design specification provides explicit information about the requirements for a product and how the product is to be put together. It is the most traditional kind of specification, having been used historically in public contracting for buildings, highways, and other public works, and represents the kind of thinking in which architects and engineers have been trained.
      </div>
      <div class="col-md-12">
               <a href="#" class="btn btn-primary">Download</a>
               <a href="#" class="btn btn-info">Images</a>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions