文本
通過添加文本的顏色與下面的類的意思。 鏈接會變暗懸停：
| 類 | 描述 | 例 |
|---|---|---|
| .text-muted | 帶班風格的文字"text-muted" | 嘗試一下 |
| .text-primary | 文字風格與類"text-primary" | 嘗試一下 |
| .text-success | 文字帶班風格"text-success" | 嘗試一下 |
| .text-info | 文字帶班風格的"text-info" | 嘗試一下 |
| .text-warning | 文字帶班風格的"text-warning" | 嘗試一下 |
| .text-danger | 文字帶班風格"text-danger" | 嘗試一下 |
背景
通過添加背景顏色與下面的類的意思。 鏈接會變暗懸停就像文本類：
| 類 | 描述 | 例 |
|---|---|---|
| .bg-primary | 表格單元格的樣式與類"bg-primary" | 嘗試一下 |
| .bg-success | 表格單元格的樣式與類"bg-success" | 嘗試一下 |
| .bg-info | 表格單元格的樣式與類"bg-info" | 嘗試一下 |
| .bg-warning | 表格單元格的樣式與類"bg-warning" | 嘗試一下 |
| .bg-danger | 表格單元格的樣式與類"bg-danger" | 嘗試一下 |
其他
| 類 | 描述 | 例 |
|---|---|---|
| .pull-left | 漂浮元件向左 | 嘗試一下 |
| .pull-right | 漂浮元素向右 | 嘗試一下 |
| .center-block | 設置元素，以display:block用margin-right:auto和margin-left:auto | 嘗試一下 |
| .clearfix | 清除花車 | 嘗試一下 |
| .show | 強制要顯示的元素 | 嘗試一下 |
| .hidden | 強制被隱藏元素 | 嘗試一下 |
| .sr-only | 隱藏的元素，除了屏幕閱讀器的所有設備 | 嘗試一下 |
| .sr-only-focusable | 與.sr只-相結合，再次顯示元素時，它的重點是（由僅提供鍵盤用戶EG） | 嘗試一下 |
| .text-hide | 有助於背景圖像替換元素的文本內容 | 嘗試一下 |
| .close | 指示關閉圖標 | 嘗試一下 |
| .caret | 表示下拉功能（將在dropup菜單自動反轉） | 嘗試一下 |
響應公用事業
這些類是用來顯示和/或隱藏通過媒體查詢按設備的內容。
使用一個或可用類切換跨內容的組合viewport斷點：
| 類 | 超小型設備手機（<768px） | 小型設備片劑（≥768px） | 中型設備桌面（≥992px） | 大型設備桌面（≥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-*-*類有三種變化，每一個CSS display屬性值：
| 班集團 | CSS顯示 |
|---|---|
| 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>結果：
Example
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.
試一試»