Hongbo Miao Hongbo Miao - 3 months ago 9
CSS Question

Align two buttons at the bottom

I am using Bootstrap 4's card groups. I want to align both buttons at the same line which should be at bottom of the .card.

enter image description here

The jsfiddle.

I tried

.card {
position: relative;
}

.btn {
position: relative; // <- if I use absolute here, it will be ugly
bottom: 0;
}


and also

.card {
display: table;
}

.btn {
display: table-cell;
vertical-align: bottom;
}


But neither works.

Answer

would something like this work for you ?

https://jsfiddle.net/44Lnjj8d/5/

.card {
  position: relative;
  padding-bottom: 40px;
}

.btn {
  position: absolute;
  bottom: 10px;
  left: 50%;
  -ms-transform:: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}