Bootstrap4 displayクラスの使い方を徹底解説

Bootstrap4で利用できるディスプレイ(display)の使い方をご紹介します。displayを利用すると、ブレークポイントに応じて表示・非表示の切り替えのほか、色々なdisplay設定をすることができます。

Bootstrap3→4に変わってからの主な変更点

Bootstrap4では、CSSのdisplayプロパティに関する一通りのクラスが用意されました。

Bootstrap4で用意されているdisplayに関するクラス

  • d-{prefix}-none
  • d-{prefix}-inline
  • d-{prefix}-inline-block
  • d-{prefix}-block
  • d-{prefix}-table
  • d-{prefix}-table-cell
  • d-{prefix}-table-row
  • d-{prefix}-table-flex
  • d-{prefix}-table-inline-flex

{prefix}には、{なし | sm | md | lg | xl}が入ります。

なお、Bootstrap4では、Bootstrap3で用意されたhidden-{prefix}やvisible-{prefix}は廃止され、代わりにd-{prefix}-noneやd-{prefix}-blockに変更されました。

displayで表示・非表示を設定

ここでは、displayクラスを使って、横幅サイズに応じて表示・非表示を設定する方法を説明します。

  • .d-{prefix(sm/md/lg|xl)}-none:prefixの横幅以上のときに非表示(display:none)
  • .d-{prefix(sm/md/lg|xl)}-block:prefixの横幅以上の時に表示(display:block)
Screen Size Class
XSサイズのみ表示 d-block d-sm-none
SMサイズ以上で表示 d-none d-sm-block
MDサイズ以上で表示 d-none d-md-block
LGサイズ以上で表示 .d-none .d-lg-block
XLサイズ以上で表示 .d-none .d-xl-block

たとえば、XSサイズのみ表示したい場合は、クラス名に「d-block(全て表示) d-sm-none(SMサイズ以上で表示)」を指定します。
■XSサイズのみ表示したい場合

■上記のソースコード

<h2 class="d-block d-sm-none">XSサイズ(575px)以下で表示</h2>

■表示例

■上記のソースコード

<h2 class="d-none d-sm-block">SM(576px)サイズ以上で表示</h2>
<h2 class="d-none d-md-block">MD(768px)サイズ以上で表示</h2>
<h2 class="d-none d-lg-block">LG(992px)サイズ以上で表示</h2>
<h2 class="d-none d-xl-block">XL(1200px)サイズ以上で表示</h2>

そのほかにも、d-{prefix}-noneとd-{prefix}-blockの組み合わせで、任意のブレークポイントで表示・非表示を切り替えることができます。

Screen Size Class
全てのサイズで非表示 d-none
XSサイズのみ非表示 d-none d-sm-block
SMサイズのみ非表示 d-sm-none d-md-block
MDサイズのみ非表示 .d-md-none .d-lg-block
LGサイズのみ非表示 .d-lg-none .d-xl-block
XLサイズのみ非表示 .d-xl-none
全て表示(初期値) .d-block
XSサイズのみ表示 .d-block .d-sm-none
SMサイズのみ表示 .d-none .d-sm-block .d-md-none
MDサイズのみ表示 .d-none .d-md-block .d-lg-none
LGサイズのみ表示 .d-none .d-lg-block .d-xl-none
XLサイズのみ表示 .d-none .d-xl-block

■visible/hiddenの表示例

■上記のソースコード

<h1 class="visible-xs" style="color:blue;">widthが767px以下で表示される</h1>
<h1 class="hidden-xs" style="color:red;">widthが767px以下で消える</h1>

色々なdisplay(ディスプレイ)にクラス

表示・非表示以外にも色々なdisplayクラスが用意されています。
displayに関するクラスは下記の通りです。

クラス CSS displayの値
d-none display:none
d-inline display:inline
d-inline-block display:inline-block
d-block display:block
d-table display:table
d-table-cell display:table-cell
d-table-row display:table-row
d-flex display:flex
d-inline-flex display:inline-flex

■d-inlineの表示例
Bootstrap4 display d-inline
■上記のソースコード

<h2 class="d-inline bg-primary">d-inline</h2>
<h2 class="d-inline bg-success">d-inline</h2>

■d-blockの表示例
Bootstrap4 display d-block
■上記のソースコード

<span class="d-block bg-primary">d-block</span>
<span class="d-block bg-success">d-block</span>

ブレークポイントを設定することもできます

クラス CSS displayの値
d-{sm | md | lg | xl}-none {sm | md | lg | xl}サイズ以上でdisplay:none
d-{sm | md | lg | xl}-inline {sm | md | lg | xl}サイズ以上でdisplay:inline
d-{sm | md | lg | xl}-inline-block {sm | md | lg | xl}サイズ以上でdisplay:inline-block
d-{sm | md | lg | xl}-block {sm | md | lg | xl}サイズ以上でdisplay:block
d-{sm | md | lg | xl}-table {sm | md | lg | xl}サイズ以上でdisplay:table
d-{sm | md | lg | xl}-table-cell {sm | md | lg | xl}サイズ以上でdisplay:table-cell
d-{sm | md | lg | xl}-table-row {sm | md | lg | xl}サイズ以上でdisplay:table-row
d-{sm | md | lg | xl}-flex {sm | md | lg | xl}サイズ以上でdisplay:flex
d-{sm | md | lg | xl}-inline-flex {sm | md | lg | xl}サイズ以上でdisplay:inline-flex

また、Bootstrap4ではフレックスボックスが採用されて、d-flexやd-inline-flexが使えるようになりました。フレックスボックスに関する詳しい使い方は下記をご参照ください。

Bootstrap4 Flex(フレックス)ユーティリティの使い方を徹底解説


Display Property | Bootstrap4

まとめ

いかがでしたでしょうか。
今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)4のディスプレイ(display)の使い方の基本をご紹介しました。
公式サイトにも使い方の詳細が掲載されていますので、参考にしながら活用してみてください。
Display Property | Bootstrap4

今回は、以上になります。最後までご覧いただきありがとうございました。