title: 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?
body: <p>As asked in the title, I am creating a website by using bootstrap v3.3.2.</p>
  
  <p>The first question is that I am using the grid system to align the caption to the right of the thumbnail as shown below:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
      &lt;div class="thumbnail"&gt;
  
          &lt;div class="row"&gt;
  
              &lt;div class="col-md-6"&gt;
  
                  &lt;a href="#"&gt;
  
                      &lt;img class="img-responsive" src="images/pic.jpg"&gt;
  
                  &lt;/a&gt;
  
              &lt;/div&gt;
  
              &lt;div class="col-md-6"&gt;
  
                  &lt;div class="caption"&gt;
  
                      &lt;h2&gt;Title&lt;/h2&gt;
  
                      &lt;hr&gt;
  
                      &lt;p&gt;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.&lt;/p&gt;
  
                      &lt;hr&gt;
  
                      &lt;p class="caption-footer"&gt;
  
                          &lt;a href="#" class="btn"&gt;&lt;span class="glyphicon glyphicon-heart"&gt;&lt;/span&gt; Like it&lt;/a&gt;
  
                          &lt;a href="#" class="btn"&gt;&lt;span class="glyphicon glyphicon-share"&gt;&lt;/span&gt; Share it&lt;/a&gt;
  
                      &lt;/p&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Which turns out to be something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/O5eMq.jpg" alt="enter image description here"></p>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/eybun.jpg" alt="enter image description here"></p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Below is my CSS file for class caption-footer and how it turns out to be:</p>
  
  <pre><code>caption-footer{
    position: absolute;
    bottom:0;
    left: 0;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/a1zRx.jpg" alt="enter image description here"></p>
  
  <p>I have checked quite a few links here (like: <a href="https://stackoverflow.com/questions/11798545/twitter-bootstrap-thumbnail-caption-to-the-right">link1</a> <a href="https://stackoverflow.com/questions/14085980/align-bootstrap-content-to-the-right-of-an-image-within-a-thumbnail">link2</a>). But none of them seems to work for my case.</p>
  
  <p>Thanks in advance for any help!</p>