レイアウト:rowとcol

等幅カラム、レスポンシブなし、そのまま縮小:rowとcol


1列目
2列目
1列目
2列目
3列目

  <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>

合計12になるようにカラムの幅を指定する:col-2


col-2
col-4
col-6

  <!-- 画面の大きさにより12分割され、数字の値の幅が割り当てられる -->
  <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>

1カラムのみ幅を設定、残りは等価:col-6


col
col-6
col

  <div class="row">
    <div class="col">col</div>
    <!-- 1つに数字を指定すると、それが確保され、残りは自動で等価に設定される -->
    <div class="col-6">col-6</div>
    <div class="col">col</div>
  </div>

可変幅カラム(コンテンツの文字数により幅が可変になる):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>
    <!-- col-mdは、Medium以上の指定方法 -->
    <div class="col-md-auto">col-md-auto:Medium以上でコンテンツ文字数によって幅が可変</div>
    <div class="col">col</div>
  </div>

1つのrow内で12を超える場合、勝手に折り返り:col-9


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>

colなしを挿入すると、そこで折り返しが起こる:w-100


col
col
w-100
col
col

  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100">w-100</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>

ブレイクポイントによる切り替え:col-sm-8


col-sm-8
col-sm-4
col-sm
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>

グリッドレイアウトのネスト(入れ子、階層化):colとrow


第1階層: col-sm-9
第2階層: col-8
第2階層: col-4
第1階層: col-sm-3

  <!-- rowの幅は、ひとつ上のhtmlタグの幅に制約を受けて100%になる -->
  <div class="row">
    <div class="col-sm-9">第1階層: col-sm-9
      <!-- 階層化colの中にrowcolの幅を基準にして12の計算が始まる -->
      <div class="row">
        <!-- colを2つ書くと、それぞれの画面の状況により適用されるものが変わる -->
        <div class="col-8">第2階層: col-8</div>
        <div class="col-4">第2階層: col-4</div>
      </div>
    </div>
    <div class="col-sm-3">第1階層: col-sm-3</div>
  </div>

左寄せで配置:justify-content:flex-start


col-4
col-4

  <!-- 左寄せでスタート、12の残りは勝手に余白になる -->
  <div class="row justify-content-start">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
  </div>

中央寄せで配置:justify-content:flex-center


col-4
col-4

  <!-- 中央寄席でスタート、12の残りは勝手に余白になる -->
  <div class="row justify-content-center">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
  </div>

右寄せで配置:justify-content:flex-end


col-4
col-4

  <!-- 右寄せでスタート、12の残りは勝手に余白になる -->
  <div class="row justify-content-end">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
  </div>

等間隔に配置: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>

両端から均等に配置: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>

カラム単位での垂直方向整列:align-self-*


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>

画面の状況でカラムの幅を変える、Medium以上:col-md-8


col-12とcol-md-8
col-6とcol-md-4

  <div class="row">
    <!-- Medium以上:だとmdが優先的に選択される -->
    <!-- xl:デスクトップ PC などの大画面モニタ 1200px 以上 -->
    <!-- lg:ノート PC などの省サイズモニタ 992px 以上 -->
    <!-- md:タブレット端末など 768px 以上 -->
    <!-- sm:スマートフォン(横持ち)など 576px 以上 -->
    <!-- -:スマートフォン(縦持ち)、IoT 端末など 576px 未満 -->
    <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>

画面の状況で変える、Medium以上:Medium以上:col-md-4


col-6とcol-md-4
col-6とcol-md-4
col-6とcol-md-4

  <div class="row">
    <!-- Medium以下なら、2列カラムにある-->
    <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>

行の分割をブレイクポイントで切り替える:d-none d-md-block


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>

ガターなしカラム:no-gutters


col
col

  <!-- ガターは、グリッドのカラム間にある余白のこと -->
  <!-- 画面いっぱいに広がる -->
  <div class="row no-gutters">
    <div class="col">col</div>
    <div class="col">col</div>
  </div>

何も書かなければガターあり(はみ出る):rowとcol


col
col

  <!-- 文字開始位置が、divに隣接しない -->
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
  </div>

カラムのオフセット offset-md-4


col-md-4
col-md-4とoffset-md-4

  <div class="row">
    <div class="col-md-4">col-md-4</div>
    <!-- Medium以上で4列分左に移動 -->
    <!-- margin-left: 33.333333%; マージンレフトを設定して間を空ける-->
    <div class="col-md-4 offset-md-4">col-md-4とoffset-md-4</div>
  </div>

オフセットのリセット:offset-md-0


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>

コンテンツの並べ替え:order-1~order-12


第1のカラム(順序指定なし)
第2のカラム(順序指定は12)
第3のカラム(順序指定は1)

  <div class="row">
    <!-- orderの数字の小さい順に並ぶ、プログラムでhtmlを書くときは便利 -->
    <div class="col">第1のカラム(順序指定なし)</div>
    <div class="col order-12">第2のカラム(順序指定は12)</div>
    <div class="col order-1">第3のカラム(順序指定は1)</div>
  </div>

コンテンツの並べ替え:order-first


第1のカラム(順序指定なし)
第2のカラム(順序指定なし)
第3のカラム(順序指定は1)

  <div class="row">
    <div class="col">第1のカラム(順序指定なし)</div>
    <div class="col">第2のカラム(順序指定なし)</div>
    <!-- order-firstが最初に並ぶ、プログラムでhtmlを書くときは便利 -->
    <div class="col order-first">第3のカラム(順序指定は1)</div>
  </div>

垂直整列:align-items-startとalign-items-centerとalign-items-end


col
col
col
col
col
col
col
col
col

  <!-- 上寄せ高さは隣接rowで決まる模様 -->
  <div class="row align-items-start">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row align-items-center">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <!-- 下寄せ高さは隣接rowで決まる模様 -->
  <div class="row align-items-end">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>