最終更新日: 2021年2月9日
Bootstrapで5分割のレイアウトを作成する方法！
Bootstrapを用いて5分割のレイアウトを作成する方法を解説します。Bootstrapのgridレイアウトでは12分割になるため、通常は5分割のレイアウトは実現できません。今回はBootstrapを用いて5分割のレイアウトを作成する方法を解説します。
Bootstrapで5分割のレイアウトを作成したい
Bootstrapのcolクラスを用いるgridレイアウトは12分割で指定するため、通常5等分のレイアウトは実現できません。
しかし、デザイン的に5列のレイアウトを作成したいことは少なくありません。
今回はBootstrapを用いて、5列のレイアウトを作成する方法を紹介します。
Bootstrapで5分割のレイアウトを作成する方法
まずは以下のサンプルコードを確認してください。
このように5カラムのレイアウトを作成できています。
col-**-15クラスに対して、widthプロパティに20%の値を与えることで5カラムのレイアウトを作成しています。
**部分には5カラムレイアウトにしたい画面幅を適用してください。
また今回はflexプロパティを用いて横並びを実装しましたが、floatプロパティで指定することもできます。
