ブートストラップ4の画像の中央にボタンを配置する方法

Question

3つのボタンを中央の右揃えで配置しますが、ブートストラップ4の画像に配置します。これはできません。position:relativeを適用して試してみました。画像とposition:absoluteがボタン上に表示されますが、それも機能していません。

<div class="container-fluid headerimage" style="padding:0 !important"> 
    <div class="col-md-12" style="padding:0 !important"> 
     <img src="images/banner.jpg" alt="placeholder 960" class="img-responsive" > 
    </div> 
    <div class="container"> 
    <button class="btn btn-primary">Teacher</button> 
    <button class="btn btn-success">Student</button> 
    <button class="btn btn-warning">Administrator</button> 
    </div> 
</div> 

これは私のCSSコードです。

.img-responsive{ 
    width:100% !important; 
    border-radius:0 0 5px 5px !important; 
} 

私はこの時点で固執しています。

Answer 1

ボタンを相対的な位置に置き、画像を絶対位置に置くと、画像のボタンをマージンで移動できます。

Answer 2

私はあなたhttps://jsfiddle.net/qynck1gp/1/

CSS

.btn-wrapper{ text-align:center; position:absolute; bottom: 0px; margin: 0 auto; width:100%;} 

マージンを中心にボタンを直接置くための最善のことであるHTML

<div class="container-fluid headerimage" style="padding:0 !important"> 
<div class="col-md-12" style="padding:0 !important"> 
    <img src="https://www.digitalplatforms.co.za/wp-content/uploads/2015/11/Website-Design-Background.jpg" alt="placeholder 960" class="img-responsive" > 
</div> 
<div class="container"> 
<div class="btn-wrapper"> 
    <button class="btn btn-primary">Teacher</button> 
    <button class="btn btn-success">Student</button> 
    <button class="btn btn-warning">Administrator</button> 
    </div>