下部に2つのボタンを配置します

Question

私はブートストラップ4のcard groupsを使用しています。私は両方のボタンを.cardの一番下にあるはずの同じ行に揃えたい。

jsfiddle。

私は

.card { 
    position: relative; 
} 

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

とも

.card { 
    display: table; 
} 

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

しかし、どちらの作品を試してみました。

Answer 1

この作品のようなものがありますか？

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%); 
} 

Answer 2

あなたはカードブロックの高さを設定することができ、ボタンはブロックの後に表示されます。

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

.card-block { 
    height: 250px; 
}