Bootstrap 5のブレイクポイントとグリッドをわかりやすく解説

Bootstrap 5には6段階のレスポンシブ区分があります。extra small（576px未満）、sm（576px以上）、md（768px以上）、lg（992px以上）、xl（1200px以上）、xxl（1400px以上）です。レスポンシブ用のクラスはすべてこの名前を使うので、col-md-6は「768px以上で幅の半分」、d-lg-noneは「992px以上で非表示」という意味になります。Tailwindと同じくBootstrapもモバイルファーストで、ブレイクポイントなしのクラスは全サイズに、ブレイクポイント付きのクラスはその幅以上に適用されます。

Bootstrap 5のブレイクポイントとコンテナ幅

これはBootstrap公式ドキュメントのブレイクポイントに記載されているデフォルト値です。.container-fluidは常に全幅で、.container-md（ほかの接頭辞も同様）はそのブレイクポイントまで全幅、それ以降は固定幅になります。

レスポンシブグリッドの使い方

Bootstrapのグリッドは12カラムです。ブレイクポイントごとに、各要素が何カラム分を占めるかを指定します。

<div class="container">
  <div class="row g-4">
    <div class="col-12 col-md-6 col-lg-4">Card</div>
    <div class="col-12 col-md-6 col-lg-4">Card</div>
    <div class="col-12 col-md-6 col-lg-4">Card</div>
  </div>
</div>

この例では、スマホで1行に1枚、768px以上で2枚、992px以上で3枚のカードが並びます。row内のサイズ指定のないカラムはもともと全幅に広がるのでcol-12は省略できますが、書いておくと意図が明確になります。

同じ要素を並べるグリッドなら、row columnsを使うと短く書けます。

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-3">

ブレイクポイントごとに並び順を変えるにはorderクラスを使います。たとえばorder-first order-md-0のように指定すれば、スマホでは見出しの下に、PCでは見出しの横に画像を置けます。

よく使うレスポンシブユーティリティ

• 表示切り替え：d-none d-md-blockはスマホで非表示、768px以上で表示。d-lg-noneは992px以上で非表示。
• flexの方向：flex-column flex-md-rowはスマホで縦積み、md以上で横並び。
• 余白：p-3 p-lg-5で小さい画面の余白を小さくする。
• 文字揃え：text-center text-md-start。
• ナビバー：navbar-expand-lgは992px以上でメニューを展開し、それ未満ではハンバーガーボタンを表示。
• テーブル：幅の広い表は.table-responsiveで囲み、枠内でスクロールさせる。
• 画像：.img-fluidでmax-width: 100%とheight: autoを指定。

Sassのメディアクエリ用ミックスイン

BootstrapをSassからコンパイルしている場合は、ピクセル値を直書きせずミックスインを使いましょう。

.hero {
  padding: 2rem 1rem;

  @include media-breakpoint-up(lg) {
    padding: 5rem 2rem;
  }
}

@include media-breakpoint-down(md) { /* 768px未満 */ }
@include media-breakpoint-between(md, xl) { /* 768px〜1199.98px */ }
@include media-breakpoint-only(md) { /* 768px〜991.98px */ }

Bootstrap 5のmedia-breakpoint-down(md)は、mdブレイクポイント未満の幅を対象とし、max-width: 767.98pxとしてコンパイルされます。.98は、高解像度画面で幅が小数になったときに範囲が重ならないようにするためのものです。Bootstrap 4では同じミックスインが1つ上のブレイクポイントを基準にしていたため、アップグレード時につまずきやすいポイントです。

Bootstrapのブレイクポイントを変更する

Bootstrapを読み込む前にSassのマップを上書きします。

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  xxl: 1536px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1200px,
  xxl: 1440px
);

@import "bootstrap/scss/bootstrap";

キーは昇順に並べ、xs: 0は残してください。そもそも変更すべきかどうかは、デザイン上の明確な理由があるかで判断します。端末一覧ではなくコンテンツを基準に幅を決める方法は、レスポンシブのブレイクポイント解説で説明しています。

Bootstrapでよくあるレスポンシブのミス

• スマホでcol-6を使う。 幅360pxの画面で2カラムにすると、ガターを除いて1カラムあたり約160pxしか残らず、文字やボタンが収まりません。
• ナビバーのブレイクポイントを見落とす。 項目の多いナビバーをnavbar-expand-mdにすると、768〜992pxの間であふれることがあります。
• スマホでコンテンツをd-noneで隠す。 並べ替えで対応しましょう。Googleはモバイル版のページをインデックスします。
• Bootstrapと異なる値の独自メディアクエリを混ぜる。 コンポーネントは768pxで切り替わるのに、独自CSSは760pxで切り替わる、という状態になります。

Bootstrapのレイアウトを確認する方法

各区分を、ちょうどその幅と1px小さい幅で確認します。575/576、767/768、991/992、1199/1200、1399/1400です。Chrome DevToolsのデバイスツールバーにあるShow media queriesを使うと、ブレイクポイントがクリックできるバーとして表示されます。

次に、実際の機種のユーザーエージェントとピクセル比で表示を確認します。Mobile View Extensionならボタン1つで切り替えられます。確認の流れ全体はレスポンシブデザインの確認方法にまとめています。

よくある質問

Bootstrap 5のブレイクポイントは？

576px（sm）、768px（md）、992px（lg）、1200px（xl）、1400px（xxl）です。576px未満には名前のないextra smallの区分があります。

Bootstrapのcol-md-6とはどういう意味ですか？

mdブレイクポイント（768px）以上で、12カラム中6カラム、つまり行の半分を占めるという意味です。768px未満では、ほかのクラスで指定しない限り全幅になります。

Bootstrapはモバイルファーストですか？

はい。ブレイクポイントなしのクラスはすべての画面サイズに適用され、ブレイクポイント付きのクラスがその幅以上で上書きします。