bootstrap4

■レイアウト：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-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を超える場合　勝手に折り返りが起こる、行単位で１２で計算され、折り返しが決まる

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

  <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

  <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

<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

  <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

  <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

  <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

  <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

  <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

  <div class="row no-gutters">
    <div class="col">col</div>
    <div class="col">col</div>
  </div>

■レイアウト：rowとcol：ガターを削除したカラム no-guttersなしの場合（はみ出るね）

col

  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
  </div>

■レイアウト：rowとcol：ガターを削除したカラムコンテナなし（画面いっぱいに広がる）、no-guttersありの場合

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

  <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

  <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

  <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

  <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

  <div class="row align-items-end">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>