下のクラスによるテキストの色を通して意味を加えます。リンクは、マウスを乗せると黒っぽくなります：
| クラス | 説明 | 例 |
|---|---|---|
| .text-muted | クラス "text-muted" でスタイルされたテキスト | Try it |
| .text-primary | クラス "text-primary" でスタイルされたテキスト | Try it |
| .text-success | クラス "text-success" でスタイルされたテキスト | Try it |
| .text-info | クラス "text-info" でスタイルされたテキスト | Try it |
| .text-warning | クラス "text-warning" でスタイルされたテキスト | Try it |
| .text-danger | クラス "text-danger" でスタイルされたテキスト | Try it |
下のクラスによる背景色を通して意味を加えます。リンクは、テキストクラス同様に、マウスを乗せると黒っぽくなります：
| クラス | 説明 | 例 |
|---|---|---|
| .bg-primary | クラス "bg-primary" でスタイルされたテーブルのセル | Try it |
| .bg-success | クラス "bg-success" でスタイルされたテーブルのセル | Try it |
| .bg-info | クラス "bg-info" でスタイルされたテーブルのセル | Try it |
| .bg-warning | クラス "bg-warning" でスタイルされたテーブルのセル | Try it |
| .bg-danger | クラス "bg-danger" でスタイルされたテーブルのセル | Try it |
| クラス | 説明 | 例 |
|---|---|---|
| .pull-left | 要素を左へフロートする | Try it |
| .pull-right | 要素を右へフロートする | Try it |
| .center-block | 要素に margin-right:auto および margin-left:auto と共に display:block とを設定する | Try it |
| .clearfix | フロートをクリアする | Try it |
| .show | 要素を強制的に表示する | Try it |
| .hidden | 要素を強制的に非表示にする | Try it |
| .sr-only | スクリーンリーダを除いたすべてのデバイスで要素を非表示にする | Try it |
| .sr-only-focusable | .sr-only と組合わせて、(例えば、キーボードのみのユーザにより) フォーカスを取得した時に要素を再表示する | Try it |
| .text-hide | 要素のテキストコンテンツを画像で置換するのを手助けする | Try it |
| .close | 閉じアイコンを表示する | Try it |
| .caret | ドロップダウン機能を表す (dropup メニューは自動的に反転する) | Try it |
これらのクラスは、メディアクエリを介して、デバイスによってコンテンツを表示や非表示にするために使用されます。
ビューポートのブレークポイントを越えるコンテンツを切り替えるため、1 つまたは利用可能なクラスの組み合わせを使用します：
| Classes | 極小デバイス Phones (<768px) | 小型デバイス Tablets (≥768px) | 中型デバイス Desktops (≥992px) | 大型デバイス Desktops (≥1200px) |
|---|---|---|---|---|
| .visible-xs-* | Visible | Hidden | Hidden | Hidden |
| .visible-sm-* | Hidden | Visible | Hidden | Hidden |
| .visible-md-* | Hidden | Hidden | Visible | Hidden |
| .visible-lg-* | Hidden | Hidden | Hidden | Visible |
| .hidden-xs | Hidden | Visible | Visible | Visible |
| .hidden-sm | Visible | Hidden | Visible | Visible |
| .hidden-md | Visible | Visible | Hidden | Visible |
| .hidden-lg | Visible | Visible | Visible | Hidden |
v3.2.0 現在、.visible-*-* クラスには、下の 3 つのバリエーションが入ります。各クラスは、CSS
display プロパティ値に対応します：
| Group of classes | CSS display |
|---|---|
| visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
例えば、小型 (sm) 画面の場合に、使用できる .visible-*-* クラスは次の通りです：
.visible-sm-block、.visible-sm-inline、
.visible-sm-inline-block。
クラス .visible-xs、.visible-sm、.visible-md、
.visible-lg は、v3.2.0 では非推奨になっています。
<h2>Example</h2>
<p>Resize this page to see how the text below
changes:</p>
<h1 class="visible-xs">This text is shown only on an EXTRA
SMALL screen.</h1>
<h1 class="visible-sm">This text is shown only on a
SMALL screen.</h1>
<h1 class="visible-md">This text is shown only on a
MEDIUM screen.</h1>
<h1 class="visible-lg">This text is shown only on a
LARGE screen.</h1>
結果：
例
Resize this page to see how the text below changes:
This text is shown only on an EXTRA SMALL screen.
This text is shown only on a SMALL screen.
This text is shown only on a MEDIUM screen.
This text is shown only on a LARGE screen.
Try it Yourself »