■レイアウト:rowとcol:なにもしなければ等幅カラムになる、レスポンシブなし、そのまま縮小される
1列目
2列目
1列目
2列目
3列目
<section>
<div class="row">
<div class="col">1列目</div>
<div class="col">2列目</div>
</div>
<div class="row">
<div class="col">1列目</div>
<div class="col">2列目</div>
<div class="col">3列目</div>
</div>
</section>
■レイアウト:rowとcol:合計12にして、カラムの幅を指定する 2列カラム + 4列カラム + 6列カラム = 12列分
col-2
col-4
col-6
<div class="row">
<div class="col-2">col-2</div>
<div class="col-4">col-4</div>
<div class="col-6">col-6</div>
</div>
■レイアウト:rowとcol:1カラムのみ幅を設定 残りは等価
col
col-6
col
<div class="row">
<div class="col">col</div>
<div class="col-6">col-6</div><!-- 指定幅:6列カラム -->
<div class="col">col</div>
</div>
■レイアウト:rowとcol:可変幅カラムcol-auto コンテンツの幅により幅が可変にある
col
col-auto:コンテンツによって幅が可変
col
col
col-md-auto:Medium以上でコンテンツによって幅が可変
col
<div class="row">
<div class="col">col</div>
<div class="col-auto">col-auto:コンテンツによって幅が可変</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col">col</div>
<div class="col-md-auto">col-md-auto:Medium以上でコンテンツによって幅が可変</div>
<div class="col">col</div>
</div>
■レイアウト:rowとcol:12を超える場合 勝手に折り返りが起こる、行単位で12で計算され、折り返しが決まる
col-9
col-4
col-6
<div class="row">
<div class="col-9">col-9</div>
<div class="col-4">col-4</div>
<div class="col-6">col-6</div>
</div>
■レイアウト:rowとcol:等幅カラムを複数行に分割する これも勝手に折り返しが起こる
col
col
col
col
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
■レイアウト:rowとcol:グリッドレイアウトのネスト 入れ子
構造が再帰的に繰り返されて記述されること 自分が自分に戻ってくること
第一階層: col-sm-9
第二階層: col-8とcol-sm-6
第二階層: ¥col-4とcol-sm-6
第一階層: col-sm-3
<p>構造が再帰的に繰り返されて記述されること 自分が自分に戻ってくること</p>
<div class="row">
<div class="col-sm-9">第一階層: col-sm-9
<div class="row">
<div class="col-8 col-sm-6">第二階層: col-8とcol-sm-6</div>
<div class="col-4 col-sm-6">第二階層: ¥col-4とcol-sm-6</div>
</div>
</div>
<div class="col-sm-3">第一階層: col-sm-3</div>
</div>
■レイアウト:rowとcol:水平方向整列 残りは勝手に余白になる 左寄せ:justify-content:flex-start
col-4
col-4
<div class="row justify-content-start">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
■レイアウト:rowとcol:水平方向整列 残りは勝手に余白になる 中央寄せ:justify-content:flex-center
col-4
col-4
<div class="container">
<div class="row justify-content-center">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
</div>
■レイアウト:rowとcol:水平方向整列 残りは勝手に余白になる 右寄せ:justify-content:flex-end
col-4
col-4
<div class="row justify-content-end">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
■レイアウト:rowとcol:水平方向整列 残りは勝手に余白になる 等間隔に配置:justify-content:space-around
col-4
col-4
<div class="row justify-content-around">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
■レイアウト:rowとcol:水平方向整列 残りは勝手に余白になる 両端から均等に配置:justify-content:space-between
col-4
col-4
<div class="row justify-content-between">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
■レイアウト:rowとcol:カラム単位での垂直方向整列
align-self-start
align-self-center
align-self-end
<div class="row">
<div class="col align-self-start">align-self-start</div><!-- 垂直上寄せ -->
<div class="col align-self-center">align-self-center</div><!-- 垂直中央寄せ -->
<div class="col align-self-end">align-self-end</div><!-- 垂直下寄せ -->
</div>
■レイアウト:rowとcol:複数クラスの組み合わせ:全幅カラム+半幅カラム、Medium以上:8列+4列カラム
col-12とcol-md-8
col-6とcol-md-4
<div class="row">
<div class="col-12 col-md-8">col-12とcol-md-8</div>
<div class="col-6 col-md-4">col-6とcol-md-4</div>
</div>
■レイアウト:rowとcol:複数クラスの組み合わせ:半幅カラム×3、Medium以上:4列カラム×3
col-6とcol-md-4
col-6とcol-md-4
col-6とcol-md-4
<div class="row">
<div class="col-6 col-md-4">col-6とcol-md-4</div>
<div class="col-6 col-md-4">col-6とcol-md-4</div>
<div class="col-6 col-md-4">col-6とcol-md-4</div>
</div>
■レイアウト:rowとcol:行の分割をブレイクポイントで切り替える
col
col
col
col
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100 d-none d-md-block"></div>
<!-- Medium以上では{dsplay:block}、未満では{display:none} -->
<div class="col">col</div>
<div class="col">col</div>
</div>
■レイアウト:rowとcol:ガターを削除したカラム no-guttersありの場合
col
col
<div class="row no-gutters">
<div class="col">col</div>
<div class="col">col</div>
</div>
■レイアウト:rowとcol:ガターを削除したカラム no-guttersなしの場合(はみ出るね)
col
col
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
</div>
■レイアウト:rowとcol:ガターを削除したカラム コンテナなし(画面いっぱいに広がる)、no-guttersありの場合
col
col
<div class="row no-gutters">
<div class="col">col</div>
<div class="col">col</div>
</div>
■レイアウト:rowとcol:オフセットのリセット
col-sm-5とcol-md-6
col-sm-5とoffset-sm-2とcol-md-6とoffset-md-0
<div class="row">
<div class="col-sm-5 col-md-6">col-sm-5とcol-md-6</div>
<!-- Medium以上でオフセットをクリア -->
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">col-sm-5とoffset-sm-2とcol-md-6とoffset-md-0</div>
</div>
■レイアウト:rowとcol:Spacingユーティリティのマージン設定を指定したオフセット
col-md-3とml-md-auto
col-md-3とml-md-auto
<div class="row">
<!-- Medium以上でml(margin-left)を自動設定 -->
<div class="col-md-3 ml-md-auto">col-md-3とml-md-auto </div>
<!-- Medium以上でml(margin-left)を自動設定 -->
<div class="col-md-3 ml-md-auto">col-md-3とml-md-auto </div>
</div>
■レイアウト:rowとcol:オフセット用クラスによるカラムのオフセット
col-md-4
col-md-4とoffset-md-4
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4 offset-md-4">col-md-4とoffset-md-4</div><!-- Medium以上で4列分左に移動 -->
</div>
■レイアウト:rowとcol:コンテンツの並べ替え:order-1~order-12
第1のカラム(順序指定なし)
第2のカラム(順序指定は12)
第3のカラム(順序指定は1)
<div class="row">
<div class="col">第1のカラム(順序指定なし)</div>
<div class="col order-12">第2のカラム(順序指定は12)</div>
<div class="col order-1">第3のカラム(順序指定は1)</div>
</div>
■レイアウト:rowとcol:コンテンツの並べ替え:orderfirst
第1のカラム(順序指定なし)
第2のカラム(順序指定なし)
第3のカラム(順序指定は1)
<div class="row">
<div class="col">第1のカラム(順序指定なし)</div>
<div class="col">第2のカラム(順序指定なし)</div>
<div class="col order-first">第3のカラム(順序指定は1)</div>
</div>
■レイアウト:rowとcol:ブレイクポイントによる切り替え
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
■レイアウト:rowとcol:垂直整列上寄せ:align-items-start
col
col
col
<div class="row align-items-start">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
■レイアウト:rowとcol:垂直整列中央寄せ:align-items-center
col
col
col
<div class="row align-items-center">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
■レイアウト:rowとcol:垂直整列下寄せ:align-items-end
col
col
col
<div class="row align-items-end">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>