How to align button to bottom in Bootstrap card - Javascript

B0BBY
April 25, 2023
208 views
0 votes
2 Answers

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Answers

To achieve this add mt-auto on the last div

<div class="col-2 d-flex flex-column justify-content-between">
  <div>
    <button class="btn btn-secondary col-12">
      <i class="bi bi-arrow-up-circle-fill"></i>
    </button>
    <button class="btn btn-secondary col-12">
      <i class="bi bi-arrow-down-circle-fill"></i>
    </button>
  </div>
  <div>
    <button class="btn btn-success col-12 p-5">
      Button 1
    </button>
  </div>
  <div class="mt-auto">
    <button class="btn btn-danger col-12 p-3">
      Button 2
    </button>
  </div>
</div>

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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: