レイアウト：rowとcol
等幅カラム、レスポンシブなし、そのまま縮小：rowとcol
合計12になるようにカラムの幅を指定する：col-2
1カラムのみ幅を設定、残りは等価：col-6
可変幅カラム(コンテンツの文字数により幅が可変になる)：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>
１つのrow内で12を超える場合、勝手に折り返り：col-9
colなしを挿入すると、そこで折り返しが起こる：w-100
ブレイクポイントによる切り替え：col-sm-8
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
グリッドレイアウトのネスト（入れ子、階層化）：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の中にrow、colの幅を基準にして12の計算が始まる -->
<div class="row">
<!-- colを２つ書くと、それぞれの画面の状況により適用されるものが変わる -->
<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以下なら、２列カラムにある-->
<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
カラムのオフセット 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>