Bootstrapでのテキスト・ブロック要素・グリッド・flexなどの左寄せ・中央寄せ・右寄せの方法

システム
エンジニア

Bootstrapでのテキストなどの左寄せ・中央寄せ・右寄せを教えてください。

プロジェクト
マネージャー

テキストやブロック要素などの左寄せ・中央寄せ・右寄せの方法を説明しますので、一緒に見ていきましょう。

Bootstrapでの左寄せ・中央寄せ・右寄せの方法とは？

今回は、Bootstrapでの左寄せ・中央寄せ・右寄せの方法について説明します。

ここでは、以下の左寄せ・中央寄せ・右寄せについて紹介します。
・テキスト
・ブロック要素
・グリッド
・flex

Bootstrapでの左寄せ・中央寄せ・右寄せの方法に興味のある方はぜひご覧ください。

テキスト

Bootstrapでは、text-alignで左寄せ・中央寄せ・右寄せができます。

See the Pen
bootstrap_align1 by kskumd (@kskumd)
on CodePen.

また、tableで左寄せ・中央寄せ・右寄せする場合には、tdの中にtext-alignを指定する必要があります。

See the Pen
bootstrap_align5 by kskumd (@kskumd)
on CodePen.

このようにBootstrapでは、text-alignで左寄せ・中央寄せ・右寄せができます。

ブロック要素

Bootstrapでは、ブロック要素の左寄せ・中央寄せ・右寄せができます。

See the Pen
bootstrap_align2 by kskumd (@kskumd)
on CodePen.

このようにBootstrapでは、ブロック要素の左寄せ・中央寄せ・右寄せができます。

グリッド

Bootstrapでは、グリッドの左寄せ・中央寄せ・右寄せができます。

See the Pen
bootstrap_align3 by kskumd (@kskumd)
on CodePen.

このようにBootstrapでは、グリッドの左寄せ・中央寄せ・右寄せができます。

flex

Bootstrapでは、flexの左寄せ・中央寄せ・右寄せができます。

See the Pen
bootstrap_align4 by kskumd (@kskumd)
on CodePen.

このようにBootstrapでは、flexの左寄せ・中央寄せ・右寄せができます。

システム
エンジニア

Bootstrapでの左寄せ・中央寄せ・右寄せの方法についてよく理解できました。

プロジェクト
マネージャー

左寄せ・中央寄せ・右寄せの方法が理解できたら、実際にソースコードを書いてみましょう。

まとめ

Bootstrapでの左寄せ・中央寄せ・右寄せの方法について説明しました。

ここでは、以下の左寄せ・中央寄せ・右寄せについて紹介しました。
・テキスト
・ブロック要素
・グリッド
・flex

ぜひご自身でソースコードを書いて、理解を深めてください。