アプリ屋かりん

Bootstrap

【Bootstrap】高さを設定する

Bootstrapを使用して「高さを設定する」方法を解説します。

表示

次のように表示されます。

Height 25%
Height 50%
Height 75%
Height 100%
Height auto
実装方法

次のようにコードを記載します。

<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
<div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
</div>
ADVERTISEMENTS
ADVERTISEMENTS
Copyright © アプリ屋かりん All rights reserved.