title: bootstrap-3 align links and buttons at the bottom of a div
body: <p>As can be seen in the screenshot below, the links are not aligned at the bottom of the <strong>div</strong>. How do I align the buttons for <strong>edit</strong>, <strong>delete</strong>, <strong>add cart</strong>  at the bottom of the <strong>div</strong>. Note I am not using a <strong>table</strong>.</p>
  
  <pre><code>.bottomaligned {position:absolute; bottom:0;  margin-bottom:7px; margin:7px;}
  .fixedheight { height: 208px; position:relative; border:1px solid; margin:7px;}
  </code></pre>
  
  <p>The relevant bits from template rendering the page whose screenshot is shown below is pasted here. Note that using the css <strong>class="bottomaligned"</strong> is still not aligning the links. Even when I added  <strong>width: 300px;</strong> to the css class <strong>.fixedheight</strong>, they didn't still align.</p>
  
  <pre><code> &lt;div class="row"&gt;
  
    &lt;% @products.each do |product| %&gt;
  
  
   &lt;div class="col-lg-3 col-sm-4 col-6 fixedheight "&gt;
  
      &lt;div class="bottomaligned"&gt;
       &lt;%= link_to 'edit', edit_product_path(product), class: "btn btn-danger"  %&gt;
  
       &lt;%= button_to "Delete", product, data: {confirm: 'Are u sure?'}, method: :delete, class: "btn btn-danger" %&gt;
  
       &lt;%= button_to "Add to cart", order_items_path(product_id: product) %&gt;
  
      &lt;/div&gt;
      &lt;hr&gt;
  
    &lt;/div&gt;&lt;!-- /.col-lg-3 --&gt;
  
   &lt;% end %&gt;
  &lt;/div&gt;&lt;!-- /.row --&gt;
  </code></pre>
  
  <p>The screenshot:<img src="https://i.stack.imgur.com/PePZ2.png" alt="enter image description here"></p>