2カラム・3カラムのレイアウトテンプレート集！Bootstrapで作る基本の12分割構成
生徒
「Bootstrapでウェブサイトのレイアウトを2カラムや3カラムにしたいんですが、どうやってやるんですか？」
先生
「Bootstrapのグリッドシステムを使えば、HTMLだけで簡単に2カラムや3カラムのレイアウトを作ることができますよ。」
生徒
「col-md-ってよく見ますが、あれは何ですか？」
先生
「いい質問ですね。今回はもっとシンプルに、常に固定幅で表示される col-● を使ったテンプレートだけに絞って紹介します！」
1. 2カラムレイアウト（7:5）
12分割の仕組みを使って、左を7、右を5の比率で分けた2カラムです。Bootstrapの col-7 や col-5 を使います。
<div class="container">
<div class="row">
<div class="col-7 bg-light border">左カラム（7）</div>
<div class="col-5 bg-secondary text-white border">右カラム（5）</div>
</div>
</div>
2. 3カラムレイアウト（4:4:4）
カラム3つを均等に分けたレイアウト。col-4を3つ使って合計12にします。
<div class="container">
<div class="row">
<div class="col-4 bg-light border">カラム1（4）</div>
<div class="col-4 bg-warning border">カラム2（4）</div>
<div class="col-4 bg-light border">カラム3（4）</div>
</div>
</div>
3. 幅比率を自由にカスタマイズする
col-3 や col-9 のように幅の比率を変えることで、左が狭く右が広いといったデザインにも対応できます。
<div class="container">
<div class="row">
<div class="col-3 bg-info border">ナビ（3）</div>
<div class="col-9 bg-dark text-white border">メインコンテンツ（9）</div>
</div>
</div>
4. 合計12を守るのが基本ルール
Bootstrapでは、1行（row）に含めるカラム（col-●）の合計を12以内にするのが基本です。
たとえば、col-6を2つなら合計12ですが、col-6を3つ使うと合計18となり、はみ出した分は次の行に折り返されます。
カラムを複数入れるときは、合計が12になるように意識しましょう。
5. col-●とcol-md-●の違いとは？
col-●は常にその幅で表示されますが、col-md-●は「画面幅768px以上で適用される」ブレークポイント付きのクラスです。
スマホでも同じ幅にしたい場合は、今回のように col-● を使えば簡単です。
スマホでは縦並び、タブレット以上では横並びにしたいときは、col-md-● を使います（今回は使っていません）。
6. col-autoとcolを使えば柔軟な自動幅に
Bootstrapでは、col-auto を使うと中身に合わせて自動で幅が決まります。
一方 col は、残りのスペースを均等に分けます。組み合わせれば、より柔軟なレイアウトになります。
例：
<div class="container">
<div class="row">
<div class="col-auto bg-light border">自動幅</div>
<div class="col bg-secondary text-white border">残りを全部使う</div>
</div>
</div>
