title: How to position a Bootstrap btn-group at the bottom of a page?
body: <p>Here's the code:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs-push-1 col-xs-10 col-sm-4"&gt;
          &lt;form onsubmit="return false"&gt;
              ...
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-11 col-xs-push-1 col-sm-6 buttons text-center"&gt;
          &lt;div class="btn-group"&gt;
              ...
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, I have a bootstrap row where a form takes 4 columns (tablet or larger screen) and a button group takes up 6 columns of the row. The button group automatically comes at the top of the right side of the row and I want it to be at the bottom of the right side of the row. I tried the following CSS code (where 'buttons' is the parent div of the button group), but it didn't work:</p>
  
  <pre><code>.buttons{
      position: absolute;
  }
  .btn-group{
      position: relative;
      bottom: 0;
      right: 0;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/HI1cP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HI1cP.jpg" alt="enter image description here"></a></p>