title: Align two buttons at the bottom of the page
body: <p>I have to align two buttons at the bottom of the page, but I can not do it. One is the button "gallery" and the other is icon linkedin.</p>
  
  <pre><code>&lt;div class="container fill"&gt;
   &lt;div id="myCarousel" class="carousel slide"&gt;
    &lt;div class="carousel-inner"&gt;
    &lt;div class="item"&gt;    
      &lt;div class="fill" style="background-image:url('http://www.mysite/images/category/image.jpg');background-position: center;"&gt;
     &lt;div class="container"&gt;
    &lt;div class="carousel-caption"&gt;
        &lt;h1&gt;TITLE&lt;/h1&gt;
        &lt;p class="lead"&gt;Description&lt;/p&gt;
      &lt;/div&gt; 
  &lt;/div&gt;
   &lt;div class="pull-right"&gt;
    &lt;a class="btn btn-large btn-primary" href="categories.php?id=17"&gt;View Gallery&lt;/a&gt;
   &lt;/div&gt;
    &lt;/div&gt;
     &lt;/div&gt;
       &lt;/div&gt;
   &lt;div class="pull-left"&gt;
    &lt;div class="social-caption"&gt;
        &lt;button class="btn btn-large btn-linkedin"&gt;
         &lt;i class="icon-linkedin"&gt;&lt;/i&gt;&lt;span&gt;&lt;a style="color:white" vhref="http://www.linkedin.com/"&gt; | Linkedin&lt;/span&gt;&lt;/button&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>css for the two buttons:</p>
  
  <pre><code>.social-caption {
    background-color: transparent;
    position: relative;
    max-width: 100%;
    padding: 0 20px;
    bottom: 45px;
    left: 5px;
  }
  
  
  .gallery-button { 
    background-color: transparent; 
    position: relative;
    max-width: 100%;
    padding: 0 20px; 
    bottom: 45px;
    right: 5px;
  }
  </code></pre>
  
  <p>The two buttons do not appear aligned. This problem is seen especially with mobile devices</p>
  
  <p>Solutions? Thanks</p>