How to align button to bottom in Bootstrap card

Question

In a card I have a column with different buttons. I want to have the red button at the bottom of this row but margin auto is not working for me.

How can I achieve this? Thank You!

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css" integrity="sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e" crossorigin="anonymous">

<div class="col-2">
  <div class="row">
    <div class="col">
      <button class="btn btn-secondary col-12">
        <i class="bi bi-arrow-up-circle-fill"></i>
      </button>
    </div>
    <div class="col">
      <button class="btn btn-secondary col-12">
        <i class="bi bi-arrow-down-circle-fill"></i>
      </button>
    </div>
  </div>
  <div class="row mt-5">
    <div class="col-12">
      <button class="btn btn-success col-12 p-5">
        Button 1
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <button class="btn btn-danger col-12 p-3">Button 2</button>
    </div>
  </div>
</div>

Answer 1

The main container doesn't have a height, so any mt-auto would just compute to the minimum calculated height for the entire component. So, instead you need to use utility classes and d-flex to help you out. Like so:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css" integrity="sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e" crossorigin="anonymous">

<div class="d-flex align-items-center flex-column vh-100">
  <div class="row">
    <div class="col">
      <button class="btn btn-secondary col-12">
        <i class="bi bi-arrow-up-circle-fill"></i>
      </button>
    </div>
    <div class="col">
      <button class="btn btn-secondary col-12">
        <i class="bi bi-arrow-down-circle-fill"></i>
      </button>
    </div>

    <div class="col-12">
      <button class="btn btn-success col-12 p-5">
        Button 1
      </button>
    </div>

  </div>
  <div class="mt-auto">
    <button class="btn btn-danger col-12 p-3">Button 2</button>
  </div>
</div>

JS Fiddle: https://jsfiddle.net/yg3s5pk4/

Example result:

Read more about Bootstrap flex utility classes at the docs pages.