Bootstrapのバージョンが5にアップされグリッドシステム画面サイズは5から6段階になりました。
目次
Bootstrap5のグリッドシステム画面サイズ
Bootstrap5のレイアウトは6段階構成
Bootstrap5の画面サイズは6段階になりました。1400px以上サイズのcol-xxl-*
が新たに追加されました。
V4 | V5 | デバイス | 画面幅 | クラス(*は数値) | container |
---|---|---|---|---|---|
xs | xs | スマートフォン、組み込み端末など | 576px未満 | col-* | auto |
sm | sm | ファブレットなど | 576px以上 | col-sm-* | 540px |
md | md | タブレットなど | 768px以上 | col-md-* | 720px |
lg | lg | ノートパソコンなどの省サイズモニタ | 992px以上 | col-lg-* | 960px |
xl | xl | デスクトップPCなどのモニタ | 1200px以上 | col-xl-* | 1140px |
– | xxl | テレビ、デスクトップPCなどの大画面モニタ | 1400px以上 | col-xxl-* | 1320px |
/* Extra small devices: Phones (<576px) */
@media (max-width: 575px) {}
/* Small devices: Phablet (≥576px) */
@media (min-width: 576px) and (max-width: 767px) {}
/* Medium devices: Tablets (≥768px) */
@media (min-width: 768px) and (max-width: 991px) {}
/* Large devices: laptop (≥992px) */
@media (min-width: 992px) and (max-width: 1199px) {}
/* Extra Large devices: Desktops (≥1200px) */
@media (min-width: 1200px) {}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}
表示・非表示クラス
<576px xs | ≥576px sm | ≥768px md | ≥992px lg | ≥1200px xl | ≥1400px xxl | |
---|---|---|---|---|---|---|
.d-none |
非表示 | 非表示 | 非表示 | 非表示 | 非表示 | 非表示 |
.d-none .d-sm-block |
非表示 | 表示 | 表示 | 表示 | 表示 | 表示 |
.d-sm-none .d-md-block |
表示 | 非表示 | 表示 | 表示 | 表示 | 表示 |
.d-md-none .d-lg-block |
表示 | 表示 | 非表示 | 表示 | 表示 | 表示 |
.d-lg-none .d-xl-block |
表示 | 表示 | 表示 | 非表示 | 表示 | 表示 |
.d-lg-none .d-xl-block |
表示 | 表示 | 表示 | 表示 | 非表示 | 表示 |
.d-xxl-none |
表示 | 表示 | 表示 | 表示 | 表示 | 非表示 |
<576px xs | ≥576px sm | ≥768px md | ≥992px lg | ≥1200px xl | ≥1400px xxl | |
---|---|---|---|---|---|---|
.d-block |
表示 | 表示 | 表示 | 表示 | 表示 | 表示 |
.d-block .d-sm-none |
表示 | 非表示 | 非表示 | 非表示 | 非表示 | 非表示 |
.d-none .d-sm-block .d-md-none |
非表示 | 表示 | 非表示 | 非表示 | 非表示 | 非表示 |
.d-none .d-md-block .d-lg-none |
非表示 | 非表示 | 表示 | 非表示 | 非表示 | 非表示 |
.d-none .d-lg-block .d-xl-none |
非表示 | 非表示 | 非表示 | 表示 | 非表示 | 非表示 |
.d-none .d-xl-block .d-xxl-none |
非表示 | 非表示 | 非表示 | 非表示 | 表示 | 非表示 |
.d-none .d-xxl-block |
非表示 | 非表示 | 非表示 | 非表示 | 非表示 | 表示 |
例えば、992px以上のみ表示したい場合、blockコンテンツだと d-none
とd-lg-block
を指定することになります。
印刷の表示・非表示
クラス | ブラウザ | 印刷 |
---|---|---|
.d-print-block .d-print-inline .d-print-inline-block .d-print-grid .d-print-table .d-print-table-row .d-print-table-cell .d-print-flex .d-print-inline-flex
|
非表示 | 表示 |
.d-print-none |
表示 | 非表示 |