Bootstrap5のグリッドシステム v4からの変更点

Bootstrapのバージョンが5にアップされグリッドシステム画面サイズは5から6段階になりました。

目次

Bootstrap5のグリッドシステム画面サイズ

Bootstrap5のレイアウトは6段階構成

Bootstrap5の画面サイズは6段階になりました。1400px以上サイズのcol-xxl-*が新たに追加されました。

V4V5デバイス画面幅クラス(*は数値)container
xsxsスマートフォン、組み込み端末など576px未満col-*auto
smsmファブレットなど576px以上col-sm-*540px
mdmdタブレットなど768px以上col-md-*720px
lglgノートパソコンなどの省サイズモニタ992px以上col-lg-*960px
xlxlデスクトップ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-noned-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 表示
  • URLをコピーしました!
目次