Blog スタッフブログ

Bootstrap5のグリッドシステムについてご紹介します。

Bootstrap5のグリッドシステムは、ウェブページのレイアウトを効率的に構築するためのツールです。

コンテンツを12のカラム（列）に分割し、コンテンツをこれらのカラムに配置することで、容易にレスポンシブデザインを実現できます。

基本形

<div class="row">
    <div class="col">
        カラム
    </div>
    <div class="col">
        カラム
    </div>
    <div class="col">
        カラム
    </div>
</div>

一番シンプルなパターンです。

style(display:flex)が適応され、3列で表示されます。

ここにclassを付け足していくことでレスポンシブに対応することが可能です。

割合を変える

12分割されたグリッドシステムに基づいているため

例えば、.col-6と指定すると、そのカラムは全体の幅の50%になります。

合計12になるように数を変えることで非対称な幅で表示することができます。

<div class="row">
    <div class="col-4">
        狭い
    </div>
    <div class="col-8">
        広い
    </div>
</div>

レスポンシブ

Bootstrapのグリッドシステムは、異なる画面サイズに対応するためのクラスを提供しています。

以下のようなブレークポイントが用意されており、デバイスの画面幅に応じてレイアウトを調整できます。

• .col-sm-: 小さい画面（≥576px）用。
• .col-md-: 中くらいの画面（≥768px）用。
• .col-lg-: 大きい画面（≥992px）用。
• .col-xl-: 特大の画面（≥1200px）用。
• .col-xxl-: 超特大の画面（≥1400px）用。

例としてこのように書くことで画面幅に応じて割合が変化します。

<div class="col-6 col-lg-4 col-xxl-2">