bootstrap

クラス

グリッドの幅を指定するクラスには、col- col-sm- col-md- col-lg- col-xl- の種類がある。横幅の種類と合わせて以下のクラスが用意されている。

	col-	col-sm-	col-md-	col-lg-	col-xl-
1	col-1	col-sm-1	col-md-1	col-lg-1	col-xl-1
2	col-2	col-sm-2	col-md-2	col-lg-2	col-xl-2
3	col-3	col-sm-3	col-md-3	col-lg-3	col-xl-3
4	col-4	col-sm-4	col-md-4	col-lg-4	col-xl-4
5	col-5	col-sm-5	col-md-5	col-lg-5	col-xl-5
6	col-6	col-sm-6	col-md-6	col-lg-6	col-xl-6
7	col-7	col-sm-7	col-md-7	col-lg-7	col-xl-7
8	col-8	col-sm-8	col-md-8	col-lg-8	col-xl-8
9	col-9	col-sm-9	col-md-9	col-lg-9	col-xl-9
10	col-10	col-sm-10	col-md-10	col-lg-10	col-xl-10
11	col-11	col-sm-11	col-md-11	col-lg-11	col-xl-11
12	col-12	col-sm-12	col-md-12	col-lg-12	col-xl-12

グリッドオプションの仕様

グリッドオプション(xs, sm, md, lg)の違いは下記のとおり。
コンテナの最大値以下になるとグリッドの横方向の段組みが解除され、縦方向に整列する。

クラス名	デバイスの幅	コンテナの最大幅
col-*	<576px	なし(自動)
col-sm-*	>=576px	540px
col-md-*	>=768px	720px
col-lg-*	>=992px	960px
col-xl-*	>=1200px	1140px