Bootstrapでd-flexを使って上寄せ・上下中央・下寄せを行う方法

Bootstrapではflexboxを利用することでテキストをコンテナの上寄せ・上下中央・下寄せにすることができます。

実際にはd-flexクラスとalign-items-start,align-items-center,align-items-endクラスを組み合わせて指定することで実現します。

上寄せ

d-flexクラスとalign-items-startを指定します。

<div class="d-flex align-items-start">text</div>

以下が実際に表示させた結果です。

上下中央寄せ

d-flexクラスとalign-items-centerを指定します。

<div class="d-flex align-items-center">text</div>

以下が実際に表示させた結果です。

下寄せ

d-flexクラスとalign-items-endを指定します。

<div class="d-flex align-items-end">text</div>

まとめ

Boostrapを利用することでd-flexクラスとalign-items-start,align-items-center,align-items-endクラスを組み合わせて指定するだけで、上寄せ・上下中央・下寄せを行うことができます。

以上、Bootstrapでd-flexを使って上寄せ・上下中央・下寄せを行う方法でした。