Bootstrap4、Bootstrap3からの主な変更点と利用頻度の高いクラス

ブレークポイント：ポイントが3つから4つに増加（定義済みクラスの種類は4つから5つに増加）
極小サイズは、全てのサイズで対応可能なので、.col-xs- から .col- に名称変更
モバイルサイズの中にブレークポイントが追加されたが、クラス名は大画面サイズ用の .col-xl- が追加
モバイルサイズ：.col-xs-（極小サイズ） ⇒ .col-（全てのサイズ）、.col-sm-（小サイズ）に別れる
タブレットサイズ：.col-sm-（小サイズ） ⇒ .col-md-（中サイズ）
デスクトップサイズ：.col-md-（中サイズ） ⇒ .col-lg-（大サイズ）
大画面サイズ：.col-lg-（大サイズ） ⇒ .col-xl-（特大サイズ）

デバイスの幅	極小縦モバイルサイズ <576px	小横モバイルサイズ ≥576px	中タブレットサイズ ≥768px	大デスクトップサイズ ≥992px	特大大画面サイズ ≥1200px
コンテナの最大幅	なし（自動）	540px	720px	960px	1140px
クラス名	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
列の数	12
左右脇の空白幅	30px（それぞれの側に15pxずつ）
入れ子	可能
順序変更	可能

【重要】Bootstrap４で.col-xs- は使用できない

デバイスの幅	極小モバイルサイズ <768px	小タブレットサイズ ≥768px	中デスクトップサイズ ≥992px	大大画面サイズ ≥1200px
コンテナの最大幅	なし（自動）	750px	970px	1170px
クラス名	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列の幅	自動	～62px	～81px	～97px

Bootstrap3・・・col-{prefix}-offset-{columns}・・・col-sm-offset-3

Bootstrap4・・・offset-{prefix}-{columns}・・・offset-sm-3

Bootstrap3の画像は、.img-responsive でレスポンシブになった。Bootstrap4では、.img-fluid でレスポンシブに。

.img-thumbnail を使用すると、画像に丸みを帯びた1pxの境界線の持つスタイルが使用可能。

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">

1 2	<img src="..." class="rounded float-left" alt="..."> <img src="..." class="rounded float-right" alt="...">

<img src="..." class="rounded mx-auto d-block" alt="...">

1	<img src="..." class="rounded mx-auto d-block" alt="...">

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

</div>