Bootstrap-3 aligns links and buttons at the bottom of a div

Question

As you can see in the screenshot below, the links do not align at the bottom of the div . How to align buttons for change , delete , add cart at the bottom of the div . Note. I do not use a table .

.bottomaligned {position:absolute; bottom:0; margin-bottom:7px; margin:7px;} .fixedheight { height: 208px; position:relative; border:1px solid; margin:7px;} 

The corresponding bits from the template displaying the page whose screenshot is shown below are inserted here. Note that using css class = "bottom" still doesn't align links. Even when I added width: 300px; to the css .fixedheight class, they haven't aligned yet.

  <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 --> 

Screenshot:

Answer 1

I solved it. See the new screenshot. I did this by adding 3 different CSS classes: bottom , snapshot and snapshot , 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;} 

Here's what the template looks like:

  <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 --> 

New screenshot: