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

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

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

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

なお、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)

たとえば、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の組み合わせで、任意のブレークポイントで表示・非表示を切り替えることができます。

■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に関するクラスは下記の通りです。

■d-inlineの表示例

■上記のソースコード

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

■d-blockの表示例

■上記のソースコード

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

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

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

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

Display Property | Bootstrap4

まとめ

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

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