目次
※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
各定義済クラスの をクリックすると右側のクラス名がクリップボードにコピーされます。
-
導入(Getting started)
- はじめに(Get started with Bootstrap)v5.2.0更新
- ダウンロード(Download)
- ファイルの内容(Contents)
- ブラウザとデバイス(Browsers and devices)
- JavaScript v5.2.0更新
- webpackでの使用(Bootstrap and Webpack)v5.3.0更新、v5.2.1追加
- Parcelでの使用(Bootstrap and Parcel)v5.0.0新設 v5.3.0更新
- Viteでの使用(Bootstrap and Vite)v5.2.0新設 v5.3.0更新
- アクセシビリティ(Accessibility)
- RFS v5.0.0更新
- 右書き(RTL)v5.0.0新設
- 開発に貢献(Contribute)v5.0.0設定変更 v5.1.0ツールの構築から名称変更
-
カスタマイズ(Customize)v5.0.0導入のテーマより独立
- カスタマイズの概要(Overview)
- Sassのカスタマイズ(Sass)
- Sass オプション(Options)v5.3.0オプション追加
- カラーシステム(Color)
- カラーモード(Color modes)v5.3.0新設
- コンポーネント(Components)
- CSS変数(CSS Variables)
- 最適化について(Optimize)v5.0.0新設
-
レイアウト(Layout)
- ブレークポイント(Breakpoints)v5.0.0階層追加 v5.0.0概要より分離
-
コンテナ(Containers)v5.0.0「概要」より名称変更
定義済クラス
コンテナ
- container
- container-fluid
- container-sm
- container-md
- container-lg
- container-xl
- container-xxl
-
グリッドシステム(Grid system)
定義済クラス
- row
列の自動レイアウト
- col
- col-sm
- col-md
- col-lg
- col-xl
- col-xxl
- col-1
- col-sm-1
- col-md-1
- col-lg-1
- col-xl-1
- col-xxl-1
- col-2
- col-sm-2
- col-md-2
- col-lg-2
- col-xl-2
- col-xxl-2
- col-3
- col-sm-3
- col-md-3
- col-lg-3
- col-xl-3
- col-xxl-3
- col-4
- col-sm-4
- col-md-4
- col-lg-4
- col-xl-4
- col-xxl-4
- col-5
- col-sm-5
- col-md-5
- col-lg-5
- col-xl-5
- col-xxl-5
- col-6
- col-sm-6
- col-md-6
- col-lg-6
- col-xl-6
- col-xxl-6
- col-7
- col-sm-7
- col-md-7
- col-lg-7
- col-xl-7
- col-xxl-7
- col-8
- col-sm-8
- col-md-8
- col-lg-8
- col-xl-8
- col-xxl-8
- col-9
- col-sm-9
- col-md-9
- col-lg-9
- col-xl-9
- col-xxl-9
- col-10
- col-sm-10
- col-md-10
- col-lg-10
- col-xl-10
- col-xxl-10
- col-11
- col-sm-11
- col-md-11
- col-lg-11
- col-xl-11
- col-xxl-11
- col-12
- col-sm-12
- col-md-12
- col-lg-12
- col-xl-12
- col-xxl-12
- col-auto
- col-sm-auto
- col-md-auto
- col-lg-auto
- col-xl-auto
- col-xxl-auto
行列グリッド
- row-cols-1
- row-cols-sm-1
- row-cols-md-1
- row-cols-lg-1
- row-cols-xl-1
- row-cols-xxl-1
- row-cols-2
- row-cols-sm-2
- row-cols-md-2
- row-cols-lg-2
- row-cols-xl-2
- row-cols-xxl-2
- row-cols-3
- row-cols-sm-3
- row-cols-md-3
- row-cols-lg-3
- row-cols-xl-3
- row-cols-xxl-3
- row-cols-4
- row-cols-sm-4
- row-cols-md-4
- row-cols-lg-4
- row-cols-xl-4
- row-cols-xxl-4
- row-cols-5
- row-cols-sm-5
- row-cols-md-5
- row-cols-lg-5
- row-cols-xl-5
- row-cols-xxl-5
- row-cols-6
- row-cols-sm-6
- row-cols-md-6
- row-cols-lg-6
- row-cols-xl-6
- row-cols-xxl-6
- row-cols-auto
- row-cols-sm-auto
- row-cols-md-auto
- row-cols-lg-auto
- row-cols-xl-auto
- row-cols-xxl-auto
-
列アイテム(Columns)v5.0.0「グリッド」より分離
定義済クラス
列の順序変更
- order-0
- order-sm-0
- order-md-0
- order-lg-0
- order-xl-0
- order-xxl-0
- order-1
- order-sm-1
- order-md-1
- order-lg-1
- order-xl-1
- order-xxl-1
- order-2
- order-sm-2
- order-md-2
- order-lg-2
- order-xl-2
- order-xxl-2
- order-3
- order-sm-3
- order-md-3
- order-lg-3
- order-xl-3
- order-xxl-3
- order-4
- order-sm-4
- order-md-4
- order-lg-4
- order-xl-4
- order-xxl-4
- order-5
- order-sm-5
- order-md-5
- order-lg-5
- order-xl-5
- order-xxl-5
- order-first
- order-sm-first
- order-md-first
- order-lg-first
- order-xl-first
- order-xxl-first
- order-last
- order-sm-last
- order-md-last
- order-lg-last
- order-xl-last
- order-xxl-last
空白列の指定
- offset-1
- offset-sm-1
- offset-md-1
- offset-lg-1
- offset-xl-1
- offset-xxl-1
- offset-2
- offset-sm-2
- offset-md-2
- offset-lg-2
- offset-xl-2
- offset-xxl-2
- offset-3
- offset-sm-3
- offset-md-3
- offset-lg-3
- offset-xl-3
- offset-xxl-3
- offset-4
- offset-sm-4
- offset-md-4
- offset-lg-4
- offset-xl-4
- offset-xxl-4
- offset-5
- offset-sm-5
- offset-md-5
- offset-lg-5
- offset-xl-5
- offset-xxl-5
- offset-6
- offset-sm-6
- offset-md-6
- offset-lg-6
- offset-xl-6
- offset-xxl-6
- offset-7
- offset-sm-7
- offset-md-7
- offset-lg-7
- offset-xl-7
- offset-xxl-7
- offset-8
- offset-sm-8
- offset-md-8
- offset-lg-8
- offset-xl-8
- offset-xxl-8
- offset-9
- offset-sm-9
- offset-md-9
- offset-lg-9
- offset-xl-9
- offset-xxl-9
- offset-10
- offset-sm-10
- offset-md-10
- offset-lg-10
- offset-xl-10
- offset-xxl-10
- offset-11
- offset-sm-11
- offset-md-11
- offset-lg-11
- offset-xl-11
- offset-xxl-11
- offset-12
- offset-sm-12
- offset-md-12
- offset-lg-12
- offset-xl-12
- offset-xxl-12
-
ガター(Gutters)v5.0.0設定変更 v5.0.0グリッドより分離
定義済クラス
- gx-0
- gx-sm-0
- gx-md-0
- gx-lg-0
- gx-xl-0
- gx-xxl-0
- gy-0
- gy-sm-0
- gy-md-0
- gy-lg-0
- gy-xl-0
- gy-xxl-0
- g-0
- g-sm-0
- g-md-0
- g-lg-0
- g-xl-0
- g-xxl-0
- gx-1
- gx-sm-1
- gx-md-1
- gx-lg-1
- gx-xl-1
- gx-xxl-1
- gy-1
- gy-sm-1
- gy-md-1
- gy-lg-1
- gy-xl-1
- gy-xxl-1
- g-1
- g-sm-1
- g-md-1
- g-lg-1
- g-xl-1
- g-xxl-1
- gx-2
- gx-sm-2
- gx-md-2
- gx-lg-2
- gx-xl-2
- gx-xxl-2
- gy-2
- gy-sm-2
- gy-md-2
- gy-lg-2
- gy-xl-2
- gy-xxl-2
- g-2
- g-sm-2
- g-md-2
- g-lg-2
- g-xl-2
- g-xxl-2
- gx-3
- gx-sm-3
- gx-md-3
- gx-lg-3
- gx-xl-3
- gx-xxl-3
- gy-3
- gy-sm-3
- gy-md-3
- gy-lg-3
- gy-xl-3
- gy-xxl-3
- g-3
- g-sm-3
- g-md-3
- g-lg-3
- g-xl-3
- g-xxl-3
- gx-4
- gx-sm-4
- gx-md-4
- gx-lg-4
- gx-xl-4
- gx-xxl-4
- gy-4
- gy-sm-4
- gy-md-4
- gy-lg-4
- gy-xl-4
- gy-xxl-4
- g-4
- g-sm-4
- g-md-4
- g-lg-4
- g-xl-4
- g-xxl-4
- gx-5
- gx-sm-5
- gx-md-5
- gx-lg-5
- gx-xl-5
- gx-xxl-5
- gy-5
- gy-sm-5
- gy-md-5
- gy-lg-5
- gy-xl-5
- gy-xxl-5
- g-5
- g-sm-5
- g-md-5
- g-lg-5
- g-xl-5
- g-xxl-5
- レイアウトユーティリティ(Utilities for layout)
- Z-index v5.0.0概要より分離
-
CSSグリッド(CSS Grid)v5.1.0新設
CSSグリッド有効後のクラス
- grid
CSSグリッドクラス
- g-col-1
- g-col-sm-1
- g-col-md-1
- g-col-lg-1
- g-col-xl-1
- g-col-xxl-1
- g-col-2
- g-col-sm-2
- g-col-md-2
- g-col-lg-2
- g-col-xl-2
- g-col-xxl-2
- g-col-3
- g-col-sm-3
- g-col-md-3
- g-col-lg-3
- g-col-xl-3
- g-col-xxl-3
- g-col-4
- g-col-sm-4
- g-col-md-4
- g-col-lg-4
- g-col-xl-4
- g-col-xxl-4
- g-col-5
- g-col-sm-5
- g-col-md-5
- g-col-lg-5
- g-col-xl-5
- g-col-xxl-5
- g-col-6
- g-col-sm-6
- g-col-md-6
- g-col-lg-6
- g-col-xl-6
- g-col-xxl-6
- g-col-7
- g-col-sm-7
- g-col-md-7
- g-col-lg-7
- g-col-xl-7
- g-col-xxl-7
- g-col-8
- g-col-sm-8
- g-col-md-8
- g-col-lg-8
- g-col-xl-8
- g-col-xxl-8
- g-col-9
- g-col-sm-9
- g-col-md-9
- g-col-lg-9
- g-col-xl-9
- g-col-xxl-9
- g-col-10
- g-col-sm-10
- g-col-md-10
- g-col-lg-10
- g-col-xl-10
- g-col-xxl-10
- g-col-11
- g-col-sm-11
- g-col-md-11
- g-col-lg-11
- g-col-xl-11
- g-col-xxl-11
- g-col-12
- g-col-sm-12
- g-col-md-12
- g-col-lg-12
- g-col-xl-12
- g-col-xxl-12
スタートクラス
- g-start-1
- g-start-sm-1
- g-start-md-1
- g-start-lg-1
- g-start-xl-1
- g-start-xxl-1
- g-start-2
- g-start-sm-2
- g-start-md-2
- g-start-lg-2
- g-start-xl-2
- g-start-xxl-2
- g-start-3
- g-start-sm-3
- g-start-md-3
- g-start-lg-3
- g-start-xl-3
- g-start-xxl-3
- g-start-4
- g-start-sm-4
- g-start-md-4
- g-start-lg-4
- g-start-xl-4
- g-start-xxl-4
- g-start-5
- g-start-sm-5
- g-start-md-5
- g-start-lg-5
- g-start-xl-5
- g-start-xxl-5
- g-start-6
- g-start-sm-6
- g-start-md-6
- g-start-lg-6
- g-start-xl-6
- g-start-xxl-6
- g-start-7
- g-start-sm-7
- g-start-md-7
- g-start-lg-7
- g-start-xl-7
- g-start-xxl-7
- g-start-8
- g-start-sm-8
- g-start-md-8
- g-start-lg-8
- g-start-xl-8
- g-start-xxl-8
- g-start-9
- g-start-sm-9
- g-start-md-9
- g-start-lg-9
- g-start-xl-9
- g-start-xxl-9
- g-start-10
- g-start-sm-10
- g-start-md-10
- g-start-lg-10
- g-start-xl-10
- g-start-xxl-10
- g-start-11
- g-start-sm-11
- g-start-md-11
- g-start-lg-11
- g-start-xl-11
- g-start-xxl-11
- g-start-12
- g-start-sm-12
- g-start-md-12
- g-start-lg-12
- g-start-xl-12
- g-start-xxl-12
-
コンテンツ(Content)
- Reboot
-
文字の体裁(Typography)
定義済クラス
見出し
- h1
- h2
- h3
- h4
- h5
- h6
表示見出し
- display-1
- display-2
- display-3
- display-4
- display-5
- display-6
リード文
- lead
文字の装飾
- mark
- small
引用
- blockquote
- blockquote-footer
マークなしリスト
- list-unstyled
横並びリスト
- list-inline
- list-inline-item
-
イメージ(Images)
定義済クラス
レスポンシブイメージ
- img-fluid
イメージのサムネイル
- img-thumbnail
-
テーブル(Tables)
定義済クラス
- table
カラーバリエーション
- table-active
- table-primary
- table-secondary
- table-success
- table-info
- table-warning
- table-danger
- table-light
- table-dark
アクセント付き
- table-striped
- table-striped-columns
- table-hover
テーブルの罫線
- table-bordered
- table-borderless
セル間が狭い
- table-sm
テーブルグループの仕切り線
- table-group-divider
構造
- caption-top
レスポンシブテーブル
- table-responsive
- table-responsive-sm
- table-responsive-md
- table-responsive-lg
- table-responsive-xl
- table-responsive-xxl
-
図表(Figures)
定義済クラス
- figure
- figure-img
- figure-caption
-
フォーム(Forms)v5.0.0コンポーネントより独立
- フォームの概要(Overview)
-
フォームコントロール(Form control)
定義済クラス
- form-control
- form-label
コントロールのサイズ
- form-control-sm
- form-control-lg
フォームテキスト
- form-text
読み取り専用プレーンテキスト
- form-control-plaintext
カラーピッカーの設定
- form-control-color
-
選択メニュー(Select)v5.0.0設定変更
定義済クラス
- form-select
選択メニューのサイズ
- form-select-sm
- form-select-lg
-
チェック&ラジオ(Checks and radios)v5.0.0設定変更
定義済クラス
- form-check
- form-check-input
- form-check-label
切替スイッチ
- form-switch
横並び
- form-check-inline
反対側に配置
- form-check-reverse
-
レンジ入力(Range)v5.0.0設定変更
定義済クラス
- form-range
-
インプットグループ(Input group)v5.0.0設定変更
定義済クラス
- input-group
- input-group-text
インプットグループの大きさ
- input-group-sm
- input-group-lg
-
フローティングラベル(Floating labels)v5.0.0新設
定義済クラス
- floating-labels
-
フォーム・レイアウト(Layout)v5.0.0設定変更
定義済クラス
水平フォームのラベル
- col-form-label
水平フォームのラベルの大きさ
- col-form-label-sm
- col-form-label-lg
-
入力検証(Validation)
定義済クラス
カスタムスタイル
- needs-validation
- was-validated
- valid-feedback
- invalid-feedback
サーバー側の検証
- is-valid
- is-invalid
ツールチップ
- valid-tooltip
- invalid-tooltip
-
コンポーネント(Components)
-
アコーディオン(Accordion)v5.3.0設定変更 v5.0.0「折り畳み」から分離
定義済クラス
- accordion
- accordion-item
- accordion-header
- accordion-button
- accordion-collapse
- accordion-body
- collapsed
- collapse
- show
枠なし
- accordion-flush
-
アラート(Alerts)
定義済クラス
- alert
アラートの色
- alert-primary
- alert-secondary
- alert-success
- alert-info
- alert-warning
- alert-danger
- alert-light
- alert-dark
アラート内のリンク
- alert-link
アラートの追加コンテンツ
- alert-heading
メッセージを閉じるボタン
- alert-dismissible
-
バッジ(Badges)v5.0.0設定変更
定義済クラス
- badge
-
パンくずリスト(Breadcrumb)v5.0.0スタイル変更
定義済クラス
- breadcrumb
- breadcrumb-item
- active
-
ボタン(Buttons)
定義済クラス
- btn
通常ボタンの色
- btn-primary
- btn-secondary
- btn-success
- btn-info
- btn-warning
- btn-danger
- btn-light
- btn-dark
- btn-link
アウトラインボタンの色
- btn-outline-primary
- btn-outline-secondary
- btn-outline-success
- btn-outline-info
- btn-outline-warning
- btn-outline-danger
- btn-outline-light
- btn-outline-dark
ボタンの大きさ
- btn-sm
- btn-lg
-
ボタングループ(Button group)
定義済クラス
ボタングループ
- btn-group
ボタンツールバー
- btn-toolbar
ボタングループのサイズ
- btn-group-sm
- btn-group-lg
縦積みボタングループ
- btn-group-vertical
-
カード(Cards)
定義済クラス
- card
カードコンテンツ
- card-body
- card-title
- card-subtitle
- card-text
- card-link
ヘッダとフッタ
- card-header
- card-footer
- card-header-tabs
- card-header-pills
イメージの配置
- card-img
- card-img-top
- card-img-bottom
- card-img-overlay
カードレイアウト
- card-group
- card-deck
-
カルーセル(Carousel)v5.0.0設定変更
定義済クラス
- carousel
- slide
- carousel-inner
- carousel-item
- active
コントロール付き
- carousel-control-prev-icon
- carousel-control-next-icon
インジケータ付き
- carousel-indicators
キャプション付き
- carousel-caption
クロスフェード
- carousel-fade
ダーク・バージョン
- carousel-dark 非推奨
-
閉じるボタン(Close button)v5.0.0設定変更
定義済クラス
- btn-close
ダーク・バージョン
- btn-close-white 非推奨
-
折り畳み(Collapse)v5.0.0設定変更
定義済クラス
- collapse
複数のターゲット
- multi-collapse
-
ドロップダウン(Dropdowns)v5.2.0設定変更
定義済クラス
- dropdown
- dropdown-menu
- dropdown-item
ダークドロップダウン
- dropdown-menu-dark 非推奨
ドロップの方向
- dropdown-center
- dropup
- dropup-center
- dropright
- dropleft
非対話型のドロップダウン
- dropdown-item-text
ドロップメニューの配置
- dropdown-menu-end
- dropdown-menu-sm-end
- dropdown-menu-md-end
- dropdown-menu-lg-end
- dropdown-menu-xl-end
- dropdown-menu-xxl-end
- dropdown-menu-start
- dropdown-menu-sm-start
- dropdown-menu-md-start
- dropdown-menu-lg-start
- dropdown-menu-xl-start
- dropdown-menu-xxl-start
ドロップメニューのコンテンツ
- dropdown-header
- dropdown-divider
- ※ジャンボトロン(Jumbotron)v5.0.0クラス廃止
-
リストグループ(List group)
定義済クラス
- list-group
- list-group-item
リンク/ボタンによるリストグループ
- list-group-item-action
外枠なし
- list-group-flush
番号付き
- list-group-numbered
水平スタイル
- list-group-horizontal
- list-group-horizontal-sm
- list-group-horizontal-md
- list-group-horizontal-lg
- list-group-horizontal-xl
- list-group-horizontal-xxl
リストグループの背景色
- list-group-item-primary
- list-group-item-secondary
- list-group-item-success
- list-group-item-info
- list-group-item-warning
- list-group-item-danger
- list-group-item-light
- list-group-item-dark
-
モーダル(Modal)v5.0.0設定変更
定義済クラス
モーダルコンテンツ
- modal
- modal-dialog
- modal-content
- modal-header
- modal-title
- modal-body
- modal-footer
スクロール可能
- modal-dialog-scrollable
垂直方向に中央に配置
- modal-dialog-centered
モーダルの大きさ
- modal-sm
- modal-lg
- modal-xl
フルスクリーンモーダル
- modal-fullscreen
- modal-fullscreen-sm-down
- modal-fullscreen-md-down
- modal-fullscreen-lg-down
- modal-fullscreen-xl-down
- modal-fullscreen-xxl-down
-
ナビゲーションバー(Navbar)v5.3.0設定変更
定義済クラス
- navbar
ナビゲーションバーのサブコンポーネント
- navbar-nav
- navbar-brand
- navbar-text
ナビゲーションバーの文字色
- navbar-dark 非推奨
スクロール
- navbar-nav-scroll
ナビゲーションバーの折り畳み
- navbar-expand
- navbar-expand-sm
- navbar-expand-md
- navbar-expand-lg
- navbar-expand-xl
- navbar-expand-xxl
- navbar-toggler
- navbar-toggler-icon
- collapse
- navbar-collapse
-
ナビ&タブ(Navs and tabs)v5.0.0設定変更
定義済クラス
- nav
- nav-item
- nav-link
タブ/ピル/アンダーラインナビゲーション
- nav-tabs
- nav-pills
- nav-underline
- tab-content
- tab-pane
幅一杯と等幅サイズ
- nav-fill
- nav-justified
-
オフキャンバス(Offcanvas)v5.0.0新設
定義済クラス
- offcanvas
- offcanvas-header
- offcanvas-title
- offcanvas-body
レスポンシブ
- offcanvas-sm
- offcanvas-md
- offcanvas-lg
- offcanvas-xl
- offcanvas-xxl
配置
- offcanvas-start
- offcanvas-end
- offcanvas-bottom
-
ページ送り(Pagination)
定義済クラス
- pagination
- page-item
- page-link
ページ送りの大きさ
- pagination-sm
- pagination-lg
-
プレースホルダ(Placeholders)v5.1.0新設
定義済クラス
- placeholder
プレースホルダの大きさ
- placeholder-xs
- placeholder-sm
- placeholder-lg
プレースホルダのアニメーション
- placeholder-glow
- placeholder-wave
- ポップオーバー(Popovers)v5.0.0設定変更
-
プログレスバー(Progress)v5.3.0設定変更
定義済クラス
- progress
- progress-bar
複数バー
- progress-stacked
ストライプ
- progress-bar-striped
- progress-bar-animated
- スクロールスパイ(ScrollSpy)v5.2.0設定変更
-
スピナー(Spinners)v5.0.0設定変更
定義済クラス
回転型
- spinner-border
- spinner-border-sm
放射型
- spinner-grow
- spinner-grow-sm
-
トースト(Toasts)v5.0.0設定変更
定義済クラス
- toast
- toast-header
- toast-body
- ツールチップ(Tooltips)v5.0.0設定変更
-
アコーディオン(Accordion)v5.3.0設定変更 v5.0.0「折り畳み」から分離
-
ヘルパー(Helpers)v5.0.0ユーティリティより分離
-
クリアフィックス(Clearfix)
定義済クラス
- clearfix
-
文字&背景色ヘルパー(Color and background)v5.2.0新設
定義済クラス
- text-bg-primary
- text-bg-secondary
- text-bg-success
- text-bg-info
- text-bg-warning
- text-bg-danger
- text-bg-light
- text-bg-dark
-
色付きリンク(Colored links)v5.0.0新設
定義済クラス
- link-primary
- link-secondary
- link-success
- link-info
- link-warning
- link-danger
- link-light
- link-dark
- link-body-emphasis
-
フォーカスリング(Focus ring)v5.3.0新設
定義済クラス
- focus-ring
カラーユーティリティクラス
- focus-ring-primary
- focus-ring-secondary
- focus-ring-success
- focus-ring-info
- focus-ring-warning
- focus-ring-danger
- focus-ring-light
- focus-ring-dark
-
アイコン付きリンク(Icon link)v5.3.0新設
定義済クラス
- icon-link
ホバー状態のスタイル
- icon-link-hover
-
位置ヘルパー(Position)v5.0.0位置ユーティリティより分離
定義済クラス
固定
- fixed-top
- fixed-bottom
最上部に達すると固定
- sticky-top
- sticky-sm-top
- sticky-md-top
- sticky-lg-top
- sticky-xl-top
- sticky-xxl-top
最下部に達するまで固定
- sticky-bottom
- sticky-sm-bottom
- sticky-md-bottom
- sticky-lg-bottom
- sticky-xl-bottom
- sticky-xxl-bottom
-
比率ヘルパー(Ratios)v5.0.0設定変更、クラス名変更 v5.0.0動画の埋め込みより名称変更
定義済クラス
- ratio
アスペクト比
- ratio-1x1
- ratio-4x3
- ratio-16x9
- ratio-21x9
-
積み重ねヘルパー(Stacks)v5.1.0新設
定義済クラス
- vstack
- hstack
-
伸長リンク(Stretched link)
定義済クラス
- stretched-link
-
テキストの省略(Text truncation)v5.0.0テキストユーティリティより分離
定義済クラス
- text-truncate
-
縦仕切り線(Vertical rule)v5.1.0新設
定義済クラス
- vr
-
視覚的に非表示(Visually hidden)v5.0.0設定変更、クラス名変更 v5.0.0スクリーンリーダーから名称変更
定義済クラス
- visually-hidden
- visually-hidden-focusable
-
クリアフィックス(Clearfix)
-
ユーティリティ(Utilities)
- ユーティリティAPI(Utility API)v5.0.0新設
-
背景ユーティリティ(Background)v5.0.0カラーユーティリティより分離
定義済クラス
背景色
- bg-primary
- bg-primary-subtle
- bg-secondary
- bg-secondary-subtle
- bg-success
- bg-success-subtle
- bg-info
- bg-info-subtle
- bg-warning
- bg-warning-subtle
- bg-danger
- bg-danger-subtle
- bg-light
- bg-light-subtle
- bg-dark
- bg-dark-subtle
- bg-body
- bg-body-secondary
- bg-body-tertiary
- bg-black
- bg-white
- bg-transparent
グラデーション
- bg-gradient
不透明度
- bg-opacity-75
- bg-opacity-50
- bg-opacity-25
- bg-opacity-10
-
境界ユーティリティ(Borders)
定義済クラス
罫線を追加
- border
- border-top
- border-end
- border-bottom
- border-start
罫線を消す
- border-0
- border-top-0
- border-end-0
- border-bottom-0
- border-start-0
罫線の色
- border-primary
- border-primary-subtle
- border-secondary
- border-secondary-subtle
- border-success
- border-success-subtle
- border-info
- border-info-subtle
- border-warning
- border-warning-subtle
- border-danger
- border-danger-subtle
- border-light
- border-light-subtle
- border-dark
- border-dark-subtle
- border-white
罫線の不透明度
- border-opacity-75
- border-opacity-50
- border-opacity-25
- border-opacity-10
罫線の太さ
- border-1
- border-2
- border-3
- border-4
- border-5
角丸の位置
- rounded
- rounded-top
- rounded-end
- rounded-bottom
- rounded-start
角丸の種類
- rounded-circle
- rounded-pill
角丸の大きさ
- rounded-0
- rounded-1
- rounded-2
- rounded-3
- rounded-4
- rounded-5
二面の角丸の大きさ
- rounded-top-0
- rounded-end-0
- rounded-bottom-0
- rounded-start-0
- rounded-top-1
- rounded-end-1
- rounded-bottom-1
- rounded-start-1
- rounded-top-2
- rounded-end-2
- rounded-bottom-2
- rounded-start-2
- rounded-top-3
- rounded-end-3
- rounded-bottom-3
- rounded-start-3
- rounded-top-4
- rounded-end-4
- rounded-bottom-4
- rounded-start-4
- rounded-top-5
- rounded-end-5
- rounded-bottom-5
- rounded-start-5
- rounded-top-circle
- rounded-end-circle
- rounded-bottom-circle
- rounded-start-circle
- rounded-top-pill
- rounded-end-pill
- rounded-bottom-pill
- rounded-start-pill
-
カラーユーティリティ(Colors)
定義済クラス
文字色
- text-primary
- text-primary-emphasis
- text-secondary
- text-secondary-emphasis
- text-success
- text-success-emphasis
- text-info
- text-info-emphasis
- text-warning
- text-warning-emphasis
- text-danger
- text-danger-emphasis
- text-light
- text-light-emphasis
- text-dark
- text-dark-emphasis
- text-body
- text-body-emphasis
- text-body-secondary
- text-body-tertiary
- text-muted 非推奨
- text-black
- text-white
- text-black-50 非推奨
- text-white-50 非推奨
不透明度
- text-opacity-75
- text-opacity-50
- text-opacity-25
-
表示ユーティリティ(Display property)v5.3.0クラス追加
定義済クラス
要素の非表示
- d-none
- d-sm-none
- d-md-none
- d-lg-none
- d-xl-none
- d-xxl-none
要素の表示
- d-inline
- d-sm-inline
- d-md-inline
- d-lg-inline
- d-xl-inline
- d-xxl-inline
- d-inline-block
- d-sm-inline-block
- d-md-inline-block
- d-lg-inline-block
- d-xl-inline-block
- d-xxl-inline-block
- d-block
- d-sm-block
- d-md-block
- d-lg-block
- d-xl-block
- d-xxl-block
- d-inline-grid
- d-sm-inline-grid
- d-md-inline-grid
- d-lg-inline-grid
- d-xl-inline-grid
- d-xxl-inline-grid
- d-grid
- d-sm-grid
- d-md-grid
- d-lg-grid
- d-xl-grid
- d-xxl-grid
- d-table
- d-sm-table
- d-md-table
- d-lg-table
- d-xl-table
- d-xxl-table
- d-table-row
- d-sm-table-row
- d-md-table-row
- d-lg-table-row
- d-xl-table-row
- d-xxl-table-row
- d-table-cell
- d-sm-table-cell
- d-md-table-cell
- d-lg-table-cell
- d-xl-table-cell
- d-xxl-table-cell
- d-flex
- d-sm-flex
- d-md-flex
- d-lg-flex
- d-xl-flex
- d-xxl-flex
- d-inline-flex
- d-sm-inline-flex
- d-md-inline-flex
- d-lg-inline-flex
- d-xl-inline-flex
- d-xxl-inline-flex
印刷時の表示/非表示
- d-print-none
- d-print-inline
- d-print-inline-block
- d-print-block
- d-print-grid
- d-print-inline-grid
- d-print-table
- d-print-table-row
- d-print-table-cell
- d-print-flex
- d-print-inline-flex
-
Flexユーティリティ(Flex)v5.0.0クラス追加
定義済クラス
Flexコンテナ
- d-flex
- d-sm-flex
- d-md-flex
- d-lg-flex
- d-xl-flex
- d-xxl-flex
インラインFlexコンテナ
- d-inline-flex
- d-sm-inline-flex
- d-md-inline-flex
- d-lg-inline-flex
- d-xl-inline-flex
- d-xxl-inline-flex
左からFlexアイテムを設定
- flex-row
- flex-sm-row
- flex-md-row
- flex-lg-row
- flex-xl-row
- flex-xxl-row
右からFlexアイテムを設定
- flex-row-reverse
- flex-sm-row-reverse
- flex-md-row-reverse
- flex-lg-row-reverse
- flex-xl-row-reverse
- flex-xxl-row-reverse
上からFlexアイテムを設定
- flex-column
- flex-sm-column
- flex-md-column
- flex-lg-column
- flex-xl-column
- flex-xxl-column
下からFlexアイテムを設定
- flex-column-reverse
- flex-sm-column-reverse
- flex-md-column-reverse
- flex-lg-column-reverse
- flex-xl-column-reverse
- flex-xxl-column-reverse
アイテムの行頭揃え
- justify-content-start
- justify-content-sm-start
- justify-content-md-start
- justify-content-lg-start
- justify-content-xl-start
- justify-content-xxl-start
アイテムの行末揃え
- justify-content-end
- justify-content-sm-end
- justify-content-md-end
- justify-content-lg-end
- justify-content-xl-end
- justify-content-xxl-end
アイテムの左右中央揃え
- justify-content-center
- justify-content-sm-center
- justify-content-md-center
- justify-content-lg-center
- justify-content-xl-center
- justify-content-xxl-center
アイテムを両端から均等に配置
- justify-content-between
- justify-content-sm-between
- justify-content-md-between
- justify-content-lg-between
- justify-content-xl-between
- justify-content-xxl-between
アイテムを等間隔に配置
- justify-content-around
- justify-content-sm-around
- justify-content-md-around
- justify-content-lg-around
- justify-content-xl-around
- justify-content-xxl-around
アイテムの間隔を両端から均等に配置
- justify-content-evenly
- justify-content-sm-evenly
- justify-content-md-evenly
- justify-content-lg-evenly
- justify-content-xl-evenly
- justify-content-xxl-evenly
アイテムの上揃え
- align-items-start
- align-items-sm-start
- align-items-md-start
- align-items-lg-start
- align-items-xl-start
- align-items-xxl-start
アイテムの下揃え
- align-items-end
- align-items-sm-end
- align-items-md-end
- align-items-lg-end
- align-items-xl-end
- align-items-xxl-end
アイテムの上下中央揃え
- align-items-center
- align-items-sm-center
- align-items-md-center
- align-items-lg-center
- align-items-xl-center
- align-items-xxl-center
アイテムのbaseline揃え
- align-items-baseline
- align-items-sm-baseline
- align-items-md-baseline
- align-items-lg-baseline
- align-items-xl-baseline
- align-items-xxl-baseline
アイテムをコンテナいっぱいに伸ばす
- align-items-stretch
- align-items-sm-stretch
- align-items-md-stretch
- align-items-lg-stretch
- align-items-xl-stretch
- align-items-xxl-stretch
個別アイテムの上揃え
- align-self-start
- align-self-sm-start
- align-self-md-start
- align-self-lg-start
- align-self-xl-start
- align-self-xxl-start
個別アイテムの下揃え
- align-self-end
- align-self-sm-end
- align-self-md-end
- align-self-lg-end
- align-self-xl-end
- align-self-xxl-end
個別アイテムの左右中央揃え
- align-self-center
- align-self-sm-center
- align-self-md-center
- align-self-lg-center
- align-self-xl-center
- align-self-xxl-center
個別アイテムのbaseline揃え
- align-self-baseline
- align-self-sm-baseline
- align-self-md-baseline
- align-self-lg-baseline
- align-self-xl-baseline
- align-self-xxl-baseline
個別アイテムをコンテナいっぱいに伸ばす
- align-self-stretch
- align-self-sm-stretch
- align-self-md-stretch
- align-self-lg-stretch
- align-self-xl-stretch
- align-self-xxl-stretch
アイテムを幅一杯に配置
- flex-fill
- flex-sm-fill
- flex-md-fill
- flex-lg-fill
- flex-xl-fill
- flex-xxl-fill
アイテムを伸長する
- flex-grow-1
- flex-sm-grow-1
- flex-md-grow-1
- flex-lg-grow-1
- flex-xl-grow-1
- flex-xxl-grow-1
アイテムを伸長しない
- flex-grow-0
- flex-sm-grow-0
- flex-md-grow-0
- flex-lg-grow-0
- flex-xl-grow-0
- flex-xxl-grow-0
アイテムを収縮する
- flex-shrink-1
- flex-sm-shrink-1
- flex-md-shrink-1
- flex-lg-shrink-1
- flex-xl-shrink-1
- flex-xxl-shrink-1
アイテムを収縮しない
- flex-shrink-0
- flex-sm-shrink-0
- flex-md-shrink-0
- flex-lg-shrink-0
- flex-xl-shrink-0
- flex-xxl-shrink-0
アイテムの折り返しなし
- flex-nowrap
- flex-sm-nowrap
- flex-md-nowrap
- flex-lg-nowrap
- flex-xl-nowrap
- flex-xxl-nowrap
アイテムの折り返しあり
- flex-wrap
- flex-sm-wrap
- flex-md-wrap
- flex-lg-wrap
- flex-xl-wrap
- flex-xxl-wrap
アイテムを逆方向へ折り返し
- flex-wrap-reverse
- flex-sm-wrap-reverse
- flex-md-wrap-reverse
- flex-lg-wrap-reverse
- flex-xl-wrap-reverse
- flex-xxl-wrap-reverse
アイテムの表示順
- order-0
- order-sm-0
- order-md-0
- order-lg-0
- order-xl-0
- order-xxl-0
- order-1
- order-sm-1
- order-md-1
- order-lg-1
- order-xl-1
- order-xxl-1
- order-2
- order-sm-2
- order-md-2
- order-lg-2
- order-xl-2
- order-xxl-2
- order-3
- order-sm-3
- order-md-3
- order-lg-3
- order-xl-3
- order-xxl-3
- order-4
- order-sm-4
- order-md-4
- order-lg-4
- order-xl-4
- order-xxl-4
- order-5
- order-sm-5
- order-md-5
- order-lg-5
- order-xl-5
- order-xxl-5
アイテムを最初に表示
- order-first
- order-sm-first
- order-md-first
- order-lg-first
- order-xl-first
- order-xxl-first
アイテムを最後に表示
- order-last
- order-sm-last
- order-md-last
- order-lg-last
- order-xl-last
- order-xxl-last
アイテム行の上揃え
- align-content-start
- align-content-sm-start
- align-content-md-start
- align-content-lg-start
- align-content-xl-start
- align-content-xxl-start
アイテム行の下揃え
- align-content-end
- align-content-sm-end
- align-content-md-end
- align-content-lg-end
- align-content-xl-end
- align-content-xxl-end
アイテム行の上下中央揃え
- align-content-center
- align-content-sm-center
- align-content-md-center
- align-content-lg-center
- align-content-xl-center
- align-content-xxl-center
アイテム行を両端から均等に配置
- align-content-between
- align-content-sm-between
- align-content-md-between
- align-content-lg-between
- align-content-xl-between
- align-content-xxl-between
アイテム行を等間隔に配置
- align-content-around
- align-content-sm-around
- align-content-md-around
- align-content-lg-around
- align-content-xl-around
- align-content-xxl-around
アイテム行をコンテナいっぱいに伸ばす
- align-content-stretch
- align-content-sm-stretch
- align-content-md-stretch
- align-content-lg-stretch
- align-content-xl-stretch
- align-content-xxl-stretch
-
横の配置ユーティリティ(Float)v5.0.0一部クラス名変更
定義済クラス
- float-start
- float-sm-start
- float-md-start
- float-lg-start
- float-xl-start
- float-xxl-start
- float-end
- float-sm-end
- float-md-end
- float-lg-end
- float-xl-end
- float-xxl-end
- float-none
- float-sm-none
- float-md-none
- float-lg-none
- float-xl-none
- float-xxl-none
-
相互作用ユーティリティ(Interactions)
定義済クラス
- user-select-all
- user-select-auto
- user-select-none
- pe-none
- pe-auto
-
リンクユーティリティ(Link)v5.3.0新設
定義済クラス
リンクの不透明度
- link-opacity-10
- link-opacity-25
- link-opacity-50
- link-opacity-75
- link-opacity-100
- link-opacity-10-hover
- link-opacity-25-hover
- link-opacity-50-hover
- link-opacity-75-hover
- link-opacity-100-hover
リンクの下線の色
- link-underline-primary
- link-underline-secondary
- link-underline-success
- link-underline-info
- link-underline-warning
- link-underline-danger
- link-underline-light
- link-underline-dark
リンクの下線の距離
- link-offset-1
- link-offset-2
- link-offset-3
- link-offset-1-hover
- link-offset-2-hover
- link-offset-3-hover
リンクの下線の不透明度
- link-underline
- link-underline-opacity-10
- link-underline-opacity-25
- link-underline-opacity-50
- link-underline-opacity-75
- link-underline-opacity-100
- link-underline-opacity-10-hover
- link-underline-opacity-25-hover
- link-underline-opacity-50-hover
- link-underline-opacity-75-hover
- link-underline-opacity-100-hover
-
オブジェクト・フィット(Object fit)v5.3.0新設
定義済クラス
- object-fit-contain
- object-fit-cover
- object-fit-fill
- object-fit-scale
- object-fit-none
- object-fit-sm-contain
- object-fit-sm-cover
- object-fit-sm-fill
- object-fit-sm-scale
- object-fit-sm-none
- object-fit-md-contain
- object-fit-md-cover
- object-fit-md-fill
- object-fit-md-scale
- object-fit-md-none
- object-fit-lg-contain
- object-fit-lg-cover
- object-fit-lg-fill
- object-fit-lg-scale
- object-fit-lg-none
- object-fit-xl-contain
- object-fit-xl-cover
- object-fit-xl-fill
- object-fit-xl-scale
- object-fit-xl-none
- object-fit-xxl-contain
- object-fit-xxl-cover
- object-fit-xxl-fill
- object-fit-xxl-scale
- object-fit-xxl-none
-
不透明度ユーティリティ(Opacity)v5.1.0新設
定義済クラス
- opacity-0
- opacity-25
- opacity-50
- opacity-75
- opacity-100
-
はみ出しユーティリティ(Overflow)v5.0.0クラス追加
定義済クラス
- overflow-auto
- overflow-hidden
- overflow-visible
- overflow-scroll
- overflow-x-auto
- overflow-x-hidden
- overflow-x-visible
- overflow-x-scroll
- overflow-y-auto
- overflow-y-hidden
- overflow-y-visible
- overflow-y-scroll
-
位置ユーティリティ(Position)
定義済クラス
位置の値
- position-static
- position-relative
- position-absolute
- position-fixed
- position-sticky
要素の端からの位置
- top-0
- top-50
- top-100
- start-0
- start-50
- start-100
- bottom-0
- bottom-50
- bottom-100
- end-0
- end-50
- end-100
要素の端からの位置
- translate-middle
- translate-middle-x
- translate-middle-y
-
陰影ユーティリティ(Shadows)
定義済クラス
- shadow
- shadow-sm
- shadow-lg
- shadow-none
-
サイズユーティリティ(Sizing)
定義済クラス
割合幅の設定
- w-25
- w-50
- w-75
- w-100
- w-auto
割合高の設定
- h-25
- h-50
- h-75
- h-100
- h-auto
最大100%
- mw-100
- mh-100
ビューポートを基準にする
- min-vw-100
- min-vh-100
- vw-100
- vh-100
-
空白ユーティリティ(Spacing)v5.0.0一部クラス名変更
定義済クラス
マージン
- mt-0
- mt-sm-0
- mt-md-0
- mt-lg-0
- mt-xl-0
- mt-xxl-0
- me-0
- me-sm-0
- me-md-0
- me-lg-0
- me-xl-0
- me-xxl-0
- mb-0
- mb-sm-0
- mb-md-0
- mb-lg-0
- mb-xl-0
- mb-xxl-0
- ms-0
- ms-sm-0
- ms-md-0
- ms-lg-0
- ms-xl-0
- ms-xxl-0
- mx-0
- mx-sm-0
- mx-md-0
- mx-lg-0
- mx-xl-0
- mx-xxl-0
- my-0
- my-sm-0
- my-md-0
- my-lg-0
- my-xl-0
- my-xxl-0
- m-0
- m-sm-0
- m-md-0
- m-lg-0
- m-xl-0
- m-xxl-0
- mt-1
- mt-sm-1
- mt-md-1
- mt-lg-1
- mt-xl-1
- mt-xxl-1
- me-1
- me-sm-1
- me-md-1
- me-lg-1
- me-xl-1
- me-xxl-1
- mb-1
- mb-sm-1
- mb-md-1
- mb-lg-1
- mb-xl-1
- mb-xxl-1
- ms-1
- ms-sm-1
- ms-md-1
- ms-lg-1
- ms-xl-1
- ms-xxl-1
- mx-1
- mx-sm-1
- mx-md-1
- mx-lg-1
- mx-xl-1
- mx-xxl-1
- my-1
- my-sm-1
- my-md-1
- my-lg-1
- my-xl-1
- my-xxl-1
- m-1
- m-sm-1
- m-md-1
- m-lg-1
- m-xl-1
- m-xxl-1
- mt-2
- mt-sm-2
- mt-md-2
- mt-lg-2
- mt-xl-2
- mt-xxl-2
- me-2
- me-sm-2
- me-md-2
- me-lg-2
- me-xl-2
- me-xxl-2
- mb-2
- mb-sm-2
- mb-md-2
- mb-lg-2
- mb-xl-2
- mb-xxl-2
- ms-2
- ms-sm-2
- ms-md-2
- ms-lg-2
- ms-xl-2
- ms-xxl-2
- mx-2
- mx-sm-2
- mx-md-2
- mx-lg-2
- mx-xl-2
- mx-xxl-2
- my-2
- my-sm-2
- my-md-2
- my-lg-2
- my-xl-2
- my-xxl-2
- m-2
- m-sm-2
- m-md-2
- m-lg-2
- m-xl-2
- m-xxl-2
- mt-3
- mt-sm-3
- mt-md-3
- mt-lg-3
- mt-xl-3
- mt-xxl-3
- me-3
- me-sm-3
- me-md-3
- me-lg-3
- me-xl-3
- me-xxl-3
- mb-3
- mb-sm-3
- mb-md-3
- mb-lg-3
- mb-xl-3
- mb-xxl-3
- ms-3
- ms-sm-3
- ms-md-3
- ms-lg-3
- ms-xl-3
- ms-xxl-3
- mx-3
- mx-sm-3
- mx-md-3
- mx-lg-3
- mx-xl-3
- mx-xxl-3
- my-3
- my-sm-3
- my-md-3
- my-lg-3
- my-xl-3
- my-xxl-3
- m-3
- m-sm-3
- m-md-3
- m-lg-3
- m-xl-3
- m-xxl-3
- mt-4
- mt-sm-4
- mt-md-4
- mt-lg-4
- mt-xl-4
- mt-xxl-4
- me-4
- me-sm-4
- me-md-4
- me-lg-4
- me-xl-4
- me-xxl-4
- mb-4
- mb-sm-4
- mb-md-4
- mb-lg-4
- mb-xl-4
- mb-xxl-4
- ms-4
- ms-sm-4
- ms-md-4
- ms-lg-4
- ms-xl-4
- ms-xxl-4
- mx-4
- mx-sm-4
- mx-md-4
- mx-lg-4
- mx-xl-4
- mx-xxl-4
- my-4
- my-sm-4
- my-md-4
- my-lg-4
- my-xl-4
- my-xxl-4
- m-4
- m-sm-4
- m-md-4
- m-lg-4
- m-xl-4
- m-xxl-4
- mt-5
- mt-sm-5
- mt-md-5
- mt-lg-5
- mt-xl-5
- mt-xxl-5
- me-5
- me-sm-5
- me-md-5
- me-lg-5
- me-xl-5
- me-xxl-5
- mb-5
- mb-sm-5
- mb-md-5
- mb-lg-5
- mb-xl-5
- mb-xxl-5
- ms-5
- ms-sm-5
- ms-md-5
- ms-lg-5
- ms-xl-5
- ms-xxl-5
- mx-5
- mx-sm-5
- mx-md-5
- mx-lg-5
- mx-xl-5
- mx-xxl-5
- my-5
- my-sm-5
- my-md-5
- my-lg-5
- my-xl-5
- my-xxl-5
- m-5
- m-sm-5
- m-md-5
- m-lg-5
- m-xl-5
- m-xxl-5
- mt-auto
- mt-sm-auto
- mt-md-auto
- mt-lg-auto
- mt-xl-auto
- mt-xxl-auto
- me-auto
- me-sm-auto
- me-md-auto
- me-lg-auto
- me-xl-auto
- me-xxl-auto
- mb-auto
- mb-sm-auto
- mb-md-auto
- mb-lg-auto
- mb-xl-auto
- mb-xxl-auto
- ms-auto
- ms-sm-auto
- ms-md-auto
- ms-lg-auto
- ms-xl-auto
- ms-xxl-auto
- mx-auto
- mx-sm-auto
- mx-md-auto
- mx-lg-auto
- mx-xl-auto
- mx-xxl-auto
- my-auto
- my-sm-auto
- my-md-auto
- my-lg-auto
- my-xl-auto
- my-xxl-auto
- m-auto
- m-sm-auto
- m-md-auto
- m-lg-auto
- m-xl-auto
- m-xxl-auto
パディング
- pt-0
- pt-sm-0
- pt-md-0
- pt-lg-0
- pt-xl-0
- pt-xxl-0
- pe-0
- pe-sm-0
- pe-md-0
- pe-lg-0
- pe-xl-0
- pe-xxl-0
- pb-0
- pb-sm-0
- pb-md-0
- pb-lg-0
- pb-xl-0
- pb-xxl-0
- ps-0
- ps-sm-0
- ps-md-0
- ps-lg-0
- ps-xl-0
- ps-xxl-0
- px-0
- px-sm-0
- px-md-0
- px-lg-0
- px-xl-0
- px-xxl-0
- py-0
- py-sm-0
- py-md-0
- py-lg-0
- py-xl-0
- py-xxl-0
- p-0
- p-sm-0
- p-md-0
- p-lg-0
- p-xl-0
- p-xxl-0
- pt-1
- pt-sm-1
- pt-md-1
- pt-lg-1
- pt-xl-1
- pt-xxl-1
- pe-1
- pe-sm-1
- pe-md-1
- pe-lg-1
- pe-xl-1
- pe-xxl-1
- pb-1
- pb-sm-1
- pb-md-1
- pb-lg-1
- pb-xl-1
- pb-xxl-1
- ps-1
- ps-sm-1
- ps-md-1
- ps-lg-1
- ps-xl-1
- ps-xxl-1
- px-1
- px-sm-1
- px-md-1
- px-lg-1
- px-xl-1
- px-xxl-1
- py-1
- py-sm-1
- py-md-1
- py-lg-1
- py-xl-1
- py-xxl-1
- p-1
- p-sm-1
- p-md-1
- p-lg-1
- p-xl-1
- p-xxl-1
- pt-2
- pt-sm-2
- pt-md-2
- pt-lg-2
- pt-xl-2
- pt-xxl-2
- pe-2
- pe-sm-2
- pe-md-2
- pe-lg-2
- pe-xl-2
- pe-xxl-2
- pb-2
- pb-sm-2
- pb-md-2
- pb-lg-2
- pb-xl-2
- pb-xxl-2
- ps-2
- ps-sm-2
- ps-md-2
- ps-lg-2
- ps-xl-2
- ps-xxl-2
- px-2
- px-sm-2
- px-md-2
- px-lg-2
- px-xl-2
- px-xxl-2
- py-2
- py-sm-2
- py-md-2
- py-lg-2
- py-xl-2
- py-xxl-2
- p-2
- p-sm-2
- p-md-2
- p-lg-2
- p-xl-2
- p-xxl-2
- pt-3
- pt-sm-3
- pt-md-3
- pt-lg-3
- pt-xl-3
- pt-xxl-3
- pe-3
- pe-sm-3
- pe-md-3
- pe-lg-3
- pe-xl-3
- pe-xxl-3
- pb-3
- pb-sm-3
- pb-md-3
- pb-lg-3
- pb-xl-3
- pb-xxl-3
- ps-3
- ps-sm-3
- ps-md-3
- ps-lg-3
- ps-xl-3
- ps-xxl-3
- px-3
- px-sm-3
- px-md-3
- px-lg-3
- px-xl-3
- px-xxl-3
- py-3
- py-sm-3
- py-md-3
- py-lg-3
- py-xl-3
- py-xxl-3
- p-3
- p-sm-3
- p-md-3
- p-lg-3
- p-xl-3
- p-xxl-3
- pt-4
- pt-sm-4
- pt-md-4
- pt-lg-4
- pt-xl-4
- pt-xxl-4
- pe-4
- pe-sm-4
- pe-md-4
- pe-lg-4
- pe-xl-4
- pe-xxl-4
- pb-4
- pb-sm-4
- pb-md-4
- pb-lg-4
- pb-xl-4
- pb-xxl-4
- ps-4
- ps-sm-4
- ps-md-4
- ps-lg-4
- ps-xl-4
- ps-xxl-4
- px-4
- px-sm-4
- px-md-4
- px-lg-4
- px-xl-4
- px-xxl-4
- py-4
- py-sm-4
- py-md-4
- py-lg-4
- py-xl-4
- py-xxl-4
- p-4
- p-sm-4
- p-md-4
- p-lg-4
- p-xl-4
- p-xxl-4
- pt-5
- pt-sm-5
- pt-md-5
- pt-lg-5
- pt-xl-5
- pt-xxl-5
- pe-5
- pe-sm-5
- pe-md-5
- pe-lg-5
- pe-xl-5
- pe-xxl-5
- pb-5
- pb-sm-5
- pb-md-5
- pb-lg-5
- pb-xl-5
- pb-xxl-5
- ps-5
- ps-sm-5
- ps-md-5
- ps-lg-5
- ps-xl-5
- ps-xxl-5
- px-5
- px-sm-5
- px-md-5
- px-lg-5
- px-xl-5
- px-xxl-5
- py-5
- py-sm-5
- py-md-5
- py-lg-5
- py-xl-5
- py-xxl-5
- p-5
- p-sm-5
- p-md-5
- p-lg-5
- p-xl-5
- p-xxl-5
ギャップ
- gap-0
- gap-sm-0
- gap-md-0
- gap-lg-0
- gap-xl-0
- gap-xxl-0
- gap-1
- gap-sm-1
- gap-md-1
- gap-lg-1
- gap-xl-1
- gap-xxl-1
- gap-2
- gap-sm-2
- gap-md-2
- gap-lg-2
- gap-xl-2
- gap-xxl-2
- gap-3
- gap-sm-3
- gap-md-3
- gap-lg-3
- gap-xl-3
- gap-xxl-3
- gap-4
- gap-sm-4
- gap-md-4
- gap-lg-4
- gap-xl-4
- gap-xxl-4
- gap-5
- gap-sm-5
- gap-md-5
- gap-lg-5
- gap-xl-5
- gap-xxl-5
上下にギャップ
- row-gap-0
- row-gap-sm-0
- row-gap-md-0
- row-gap-lg-0
- row-gap-xl-0
- row-gap-xxl-0
- row-gap-1
- row-gap-sm-1
- row-gap-md-1
- row-gap-lg-1
- row-gap-xl-1
- row-gap-xxl-1
- row-gap-2
- row-gap-sm-2
- row-gap-md-2
- row-gap-lg-2
- row-gap-xl-2
- row-gap-xxl-2
- row-gap-3
- row-gap-sm-3
- row-gap-md-3
- row-gap-lg-3
- row-gap-xl-3
- row-gap-xxl-3
- row-gap-4
- row-gap-sm-4
- row-gap-md-4
- row-gap-lg-4
- row-gap-xl-4
- row-gap-xxl-4
- row-gap-5
- row-gap-sm-5
- row-gap-md-5
- row-gap-lg-5
- row-gap-xl-5
- row-gap-xxl-5
左右にギャップ
- column-gap-0
- column-gap-sm-0
- column-gap-md-0
- column-gap-lg-0
- column-gap-xl-0
- column-gap-xxl-0
- column-gap-1
- column-gap-sm-1
- column-gap-md-1
- column-gap-lg-1
- column-gap-xl-1
- column-gap-xxl-1
- column-gap-2
- column-gap-sm-2
- column-gap-md-2
- column-gap-lg-2
- column-gap-xl-2
- column-gap-xxl-2
- column-gap-3
- column-gap-sm-3
- column-gap-md-3
- column-gap-lg-3
- column-gap-xl-3
- column-gap-xxl-3
- column-gap-4
- column-gap-sm-4
- column-gap-md-4
- column-gap-lg-4
- column-gap-xl-4
- column-gap-xxl-4
- column-gap-5
- column-gap-sm-5
- column-gap-md-5
- column-gap-lg-5
- column-gap-xl-5
- column-gap-xxl-5
-
テキストユーティリティ(Text)
定義済クラス
文字の配置
- text-start
- text-sm-start
- text-md-start
- text-lg-start
- text-xl-start
- text-xxl-start
- text-center
- text-sm-center
- text-md-center
- text-lg-center
- text-xl-center
- text-xxl-center
- text-end
- text-sm-end
- text-md-end
- text-lg-end
- text-xl-end
- text-xxl-end
文字の折り返し/改行
- text-wrap
- text-nowrap
- text-break
文字の変換
- text-lowercase
- text-uppercase
- text-capitalize
文字の太さと書体
- fw-bold
- fw-bolder
- fw-semibold
- fw-medium
- fw-normal
- fw-light
- fw-lighter
- fst-italic
- fst-normal
行間
- lh-1
- lh-sm
- lh-base
- lh-lg
等幅フォント
- font-monospace
色の継承
- text-reset
テキストの装飾
- text-decoration-underline
- text-decoration-line-through
- text-decoration-none
-
縦の配置ユーティリティ(Vertical alignment)
定義済クラス
- align-baseline
- align-top
- align-middle
- align-bottom
- align-text-top
- align-text-bottom
-
可視性ユーティリティ(Visibility)
定義済クラス
- visible
- invisible
-
z-indexユーティリティ(Z-index) v5.3.0新設
定義済クラス
- z-n1
- z-0
- z-1
- z-2
- z-3
-
拡張(Extend)
- アプローチ(Approach)
-
アイコン(Icons)
- Bootstrapアイコン(Bootstrap Icons)v5.2.0新設
- Emmetショートハンド集
-
その他の定義済クラス
アクティブ状態
- active
無効状態
- disabled
表示用
- fade
- show