Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

Utilities for layout (レイアウト用ユーティリティ)

レスポンシブな開発を容易に行うため、Bootstrap には、コンテンツの表示、非表示、整列、スペーシングのための多数のユーティリティクラスが含まれています。

目次

Changing display

display プロパティをレスポンシブに切り替えるには、display utilities を使用します。これをグリッドシステムやコンテンツ、コンポーネントと組み合わせて、特定のビューポートにまたがって表示したり非表示にしたりすることができます。

Flexbox options

Bootstrap は flexbox で構成されていますが、すべての要素の displaydisplay: flex に変更されているわけではありません。ほとんどの[コンポーネント](/docs/5.0/components/alerts/は flexbox を有効にして構成されています。

要素に display: flex を追加する必要がある場合は、.d-flex またはレスポンシブユーティリティ(例: .d-sm-flex)を使用してください。サイズや配置、間隔などのために追加の flexbox ユーティリティ を使用するには、このクラスもしくは display 値が必要です。

Margin and padding

marginpadding spacing utilities を使用して、要素やコンポーネントの間隔や大きさを制御します。Bootstrap には、1rem 値のデフォルトの $spacer 変数に基づいた、6 レベルのスペーシングユーティリティが含まれています。すべてのビューポートに対して値を選択するか(例: .mr-3 の場合は margin-right: 1rem)、特定のビューポートを対象とするレスポンシブユーティリティを選択できます(例: .mr-md-3 の場合は margin-right: 1rem の場合は md ブレークポイントから始まります)。

Toggle visibility

display を切り替える必要がない場合は、要素の visibility を切り替えることができます。見えない要素はページにはレイアウトされますが、視覚的に見えなくなります。