カラム

Bootstrap3.xとの変更箇所

  • ブレークポイント:ポイントが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-(特大サイズ)

Bootstrap4

デバイスの幅 極小
縦モバイルサイズ
<576px

横モバイルサイズ
≥576px

タブレットサイズ
≥768px

デスクトップサイズ
≥992px
特大
大画面サイズ
≥1200px
コンテナの最大幅 なし(自動) 540px 720px 960px 1140px
クラス名 .col- .col-sm- .col-md- .col-lg- .col-xl-
列の数 12
左右脇の空白幅 30px(それぞれの側に15pxずつ)
入れ子 可能
順序変更 可能

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

Bootstrap3.x

デバイスの幅 極小
モバイルサイズ
<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の境界線の持つスタイルが使用可能。

イメージを左右に配置

イメージの中央揃え

 

 

スポンサーリンク