bootstrap-3 align links and buttons at the bottom of a div

bootstrap-sass, css, twitter-bootstrap, twitter-bootstrap-3

Solution

I solved it. See the new screenshot. I did it by adding 3 different css classes: bottomaligned, bottomright and bottomleft, so each link now has a different css class.

  .bottomaligned {position:absolute; bottom:0;  margin-bottom:7px; left: 0;}
  .bottomright {position:absolute; bottom:0;  margin-bottom:7px; margin:7px; right: 0;}
  .bottomleft {position:absolute; bottom:0;  margin-bottom:7px; left: 100px;}
  .fixedheight { height: 200px;  width: 243px;  position:relative; border:1px solid;}

This is how the template now looks:

  <div class="col-lg-3 col-sm-4 col-6 fixedheight ">

  <div>
    <div >
      <span class="bottomleft"><%= link_to 'edit', edit_product_path(product), class: "btn btn-danger"  %></span>

      <span class="bottomright"><%= button_to "Delete", product, data: {confirm: 'Are u sure?'}, method: :delete, class: "btn btn-danger" %></span>

      <span class="bottomaligned"> <%= button_to "Add to cart", order_items_path(product_id: product) %></span>

     </div>
    <hr>
  </div><!-- /.col-lg-3 -->

The new screenshot:

Problem

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

Original source