メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

目次

※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。
※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。

各定義済クラスの をクリックすると右側のクラス名がクリップボードにコピーされます。

  • 導入(Getting started)
  • カスタマイズ(Customize)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設定変更
  • ヘルパー(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
  • ユーティリティ(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)
  • Emmetショートハンド集
  • その他の定義済クラス

    アクティブ状態

    • active

    無効状態

    • disabled

    表示用

    • fade
    • show