プログラミング未経験者の学習日記

私が学習した内容のまとめサイトです。

【Bootstrap】幅と高さを変更しよう!

Bootstrapで使用可能な幅と高さ

Bootstrap公式サイトの「Documentation」ー「Utilities」ー「Sizing」ページで確認することができます。

getbootstrap.com

幅(Width)

25%、50%、75%、100%、Autoの5種類用意されています。

Width 25%
Width 50%
Width 75%
Width 100%
Width auto

<div class="w-25">Width 25%</div>

<div class="w-50">Width 50%</div>

<div class="w-75">Width 75%</div>

<div class="w-100>Width 100%</div>

<div class="w-auto">Width auto</div>

高さ(Height)

25%、50%、75%、100%、Autoの5種類用意されています。

Height 25%
Height 50%
Height 75%
Height 100%
Height auto

<div class="h-25">Height 25%</div>

<div class="h-50">Height 50%</div>

<div class="h-75">Height 75%</div>

<div class="h-100>Height 100%</div>

<div class="h-auto">Height auto</div>