Display property (ディスプレイ)

Display を使用して、コンポーネントの表示を素早くレスポンシブに切り替えられます。よく使う値のサポートと、印刷用スタイルの制御が含まれています。

On this page

How it works

ディスプレイクラスを使用して、コンポーネントの display property をレスポンシブに切り替えられます。 displayのすべての可能な値のサブセットのみを意図的にサポートします。クラスは、必要に応じてさまざまな効果のために組み合わせることができます。

Notation

xs から xxl までのすべての breakpoints (ブレークポイント) に適用される display クラスには、ブレークポイントの略語がありません。これらのクラスは min-width: 0; 以降で適用されるため、メディアクエリに縛られないからです。しかし、残りのブレークポイントにはブレークポイントの略語が含まれています。

クラス名の形式は以下の通りです。

xs の場合は .d-{value} というクラス名が付けられます。
sm、md、lg、xl、xxl に対して .d-{breakpoint}-{value} があります。

value の種類は以下の通りです。

none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex

変数 $displays を変更して SCSS をコンパイルすれば display のプロパティ値を変更することができます。

メディアクエリは、ブレークポイントに影響を与えます。例えば、.d-lg-none は lg, xl, xxl すべてに display: none; を設定します。

Examples

d-inline

<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>

d-block d-block

<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

Hiding elements

モバイルフレンドリーな開発を迅速に行うには、レスポンシブ表示クラスを使用して、デバイスごとに要素を表示・非表示にします。同じサイトの完全に異なるバージョンを作成するのを避け、代わりに各スクリーンサイズに応じて要素をレスポンシブに非表示にします。

要素を非表示にするには、.d-none または .d-{sm,md,lg,xl,xxl}-none をターゲットの画面サイズに合わせて使用します。

例えば、.d-none .d-md-block .d-xl-none .d-xxl-none は、中・大型デバイスを除くすべての画面サイズで要素を非表示にします。

Screen size	Class
Hidden on all	`.d-none`
Hidden only on xs	`.d-none .d-sm-block`
Hidden only on sm	`.d-sm-none .d-md-block`
Hidden only on md	`.d-md-none .d-lg-block`
Hidden only on lg	`.d-lg-none .d-xl-block`
Hidden only on xl	`.d-xl-none .d-xxl-block`
Hidden only on xxl	`.d-xxl-none`
Visible on all	`.d-block`
Visible only on xs	`.d-block .d-sm-none`
Visible only on sm	`.d-none .d-sm-block .d-md-none`
Visible only on md	`.d-none .d-md-block .d-lg-none`
Visible only on lg	`.d-none .d-lg-block .d-xl-none`
Visible only on xl	`.d-none .d-xl-block .d-xxl-none`
Visible only on xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

hide on screens smaller than lg

<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Display in print

印刷の場合は、印刷クラスを使って要素の display の値を変更します。レスポンシブな .d-* ユーティリティと同じ display 値をサポートしています。

.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

印刷クラスとディスプレイクラスは組み合わせ可能です。

Screen Only (Hide on print only)

Print Only (Hide on screen only)

Hide up to large on screen, but always show on print

<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>

Sass

Utilities API

Display utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),