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

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

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

スポンサーリンク

上寄せ

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

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

text

上下中央寄せ

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

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

text

下寄せ

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

text

まとめ

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

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

タイトルとURLをコピーしました