位置ユーティリティ（Position）

要素の位置をすばやく設定するには、これらの短縮形ユーティリティを使用。

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

このページの項目

※固定位置のクラスはヘルパーに移動

位置の値（Position values）

位置ユーティリティクラスで迅速に設定できるが、レスポンシブには未対応。

設定例

指定なし<div class="position-static">...</div>

相対位置<div class="position-relative">...</div>

絶対位置<div class="position-absolute">...</div>

固定位置<div class="position-fixed">...</div>

Sticky位置<div class="position-sticky">...</div>

【設定】

指定なし（デフォルトと同じ）（position: static）：.position-static
相対位置（position: relative）：.position-relative
絶対位置（position: absolute）：.position-absolute
固定位置（position: fixed）：.position-fixed
Sticky位置（position: sticky）：.position-sticky

要素の端からの位置（Arrange elements）v5.0.0-alpha2新設、v5.0.0-beta1一部クラス名変更

端からの配置ユーティリティを使用して要素を簡単に配置する。クラスの形式は {property}-{position} となる。

property（プロパティ）は次のいずれか：

top - 垂直方向の top（上）の位置
start - 水平方向の left（左）の位置（LTR内）
bottom - 垂直方向の bottom（下）の位置
end - 水平方向の right（右）の位置（LTR内）

position（位置）は次のいずれか：

0 - 端から 0 の位置
50 - 端から 50% の位置
100 - 端から 100% の位置

（scss/_variables.scss 内の $position-values Sassマップ変数にエントリーを追加すれば、位置の値はさらに追加できる）

定義済クラスの種類

端の場所	上端	行頭端 v5.0.0-beta1クラス名変更	下端	行末端 v5.0.0-beta1クラス名変更
端から 0 の位置	`.top-0`	`.start-0`	`.bottom-0`	`.end-0`
端から 50% の位置	`.top-50`	`.start-50`	`.bottom-50`	`.end-50`
端から 100% の位置	`.top-100`	`.start-100`	`.bottom-100`	`.end-100`

見本見やすいよう色と枠を付けています

設定例

<div class="position-relative">
  <div class="position-absolute top-0 start-0">1</div>
</div>

定義済クラスの組み合わせ

位置	クラス
行頭上（上記見本の1）	`.position-absolute.top-0.start-0`
行末上（上記見本の2）	`.position-absolute.top-0.end-0`
上下左右中央（上記見本の3）	`.position-absolute.top-50.start-50`
上下左右中央（上記見本の4）	`.position-absolute.bottom-50.end-50`
行頭下（上記見本の5）	`.position-absolute.bottom-0.start-0`
行末下（上記見本の6）	`.position-absolute.bottom-0.end-0`

【設定】

div.position-relative > div.position-absolute.{property}-{position}（.{property}-{position}は上記の「定義済クラスの種類」から選択）

【変更履歴】

【v5.0.0-beta1】
- RTL（右書き）の設定追加に伴いユーティリティのクラス名変更
  - 行頭端：.left-{position} ⇒ .start-{position}
  - 行末端：.right-{position} ⇒ .end-{position}

要素を中央に配置（Center elements）v5.0.0-alpha2新設、v5.0.0-beta1クラス追加

さらに、変換ユーティリティクラス .translate-middle（transform: translateX(-50%) translateY(-50%)）を使用して要素を中央に配置できる。

このクラスは、translateX(-50%) と translateY(-50%) を要素に適用。これにより、端からの配置ユーティリティと組み合わせて、要素を絶対的中心に配置できる。

見本見やすいよう色と枠を付けています

設定例

<div class="position-relative">
  <div class="position-absolute top-0 start-0 translate-middle">1</div>
</div>

定義済クラスの組み合わせ

位置	クラス
行頭上（上記見本の1）	`.position-absolute.top-0.start-0.translate-middle`
中央上（上記見本の2）	`.position-absolute.top-0.start-50.translate-middle`
行末上（上記見本の3）	`.position-absolute.top-0.start-100.translate-middle`
行頭中央（上記見本の4）	`.position-absolute.top-50.start-0.translate-middle`
上下左右中央（上記見本の5）	`.position-absolute.top-50.start-50.translate-middle`
行末中央（上記見本の6）	`.position-absolute.top-50.start-100.translate-middle`
行頭下（上記見本の7）	`.position-absolute.bottom-0.start-0.translate-middle`
中央下（上記見本の8）	`.position-absolute.bottom-0.start-50.translate-middle`
行末下（上記見本の9）	`.position-absolute.bottom-0.start-100.translate-middle`

.translate-middle-x（transform: translateX(-50%)）か .translate-middle-y（transform: translateY(-50%)）クラスの追加により、要素を水平方向または垂直方向にのみ配置できる。

見本見やすいよう色と枠を付けています

設定例

<div class="position-relative">
  <div class="position-absolute top-0 start-50 translate-middle-x">2</div>
</div>

定義済クラスの組み合わせ

位置	クラス
行頭上（上記見本の1）	`.position-absolute.top-0.start-0`
中央上（上記見本の2）	`.position-absolute.top-0.start-50.translate-middle-x`
行末上（上記見本の3）	`.position-absolute.top-0.end-0`
行頭中央（上記見本の4）	`.position-absolute.top-50.start-0.translate-middle-y`
上下左右中央（上記見本の5）	`.position-absolute.top-50.start-50.translate-middle`
行末中央（上記見本の6）	`.position-absolute.top-50.end-0.translate-middle-y`
行頭下（上記見本の7）	`.position-absolute.bottom-0.start-0`
中央下（上記見本の8）	`.position-absolute.bottom-0.start-50.translate-middle-x`
行末下（上記見本の9）	`.position-absolute.bottom-0.end-0`

【設定】

.position-absolute.{property}-{position} に .translate-middle, .translate-middle-x, .translate-middle-y（組み合わせは上記の「定義済クラスの組み合わせ」を参照）を追加

【変更履歴】

【v5.0.0-beta1】
- .translate-middle-x, .translate-middle-y が追加

実例（Examples）

これらのクラスの実例をいくつか表示：

1.ボタンを装飾

見本

メール<button type="button" class="btn btn-primary position-relative">
  メール <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">未読メッセージ</span></span>
</button>

マーカー<button type="button" class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill">
  マーカー <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</button>

アラート<button type="button" class="btn btn-primary position-relative">
  アラート <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">未読メッセージ</span></span>
</button>

これらのクラスを既存のコンポーネントとともに使用して、新しいコンポーネントが作成できる。$position-values 変数にエントリーを追加すれば機能拡張できる。

2.プログレスバーの両端と中央に円をつける v5.3.0設定変更

見本

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

<div class="position-relative m-4">
  <div class="progress" role="progressbar" aria-label="プログレスバー" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px;">
    <div class="progress-bar" style="width: 50%;"></div>
  </div>
  <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
  <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
  <button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
</div>

※Bootstrap5.2.xの設定例赤背景が5.3.0での変更箇所

<div class="position-relative m-4">
  <div class="progress" style="height: 1px;">
    <div class="progress-bar" role="progressbar" aria-label="プログレスバー" style="width: 50%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
  <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
  <button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
</div>

【変更履歴】

【v5.2.0】
- プログレスバーの設定を変更
【v5.3.0】
- マーカーの設定：*-dark を *-secondary に変更
- プログレスバーの設定を変更

CSS v5.0.0-beta3追加、v5.3.0Sassから名称変更

Sassマップ（Sass maps）v5.3.0マップから名称変更

デフォルトの位置ユーティリティ値は Sassマップで宣言され、ユーティリティの生成に使用。

scss/_variables.scss 内 position-map の設定$position-values: (
  0: 0,
  50: 50%,
  100: 100%
);

SassユーティリティAPI（Sass utilities API）v5.3.0ユーティリティAPIより名称変更

位置ユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらに掲載。

デフォルトの設定

scss/_utilities.scss 内 utils-position の設定"position": (
  property: position,
  values: static relative absolute fixed sticky
),
"top": (
  property: top,
  values: $position-values
),
"bottom": (
  property: bottom,
  values: $position-values
),
"start": (
  property: left,
  class: start,
  values: $position-values
),
"end": (
  property: right,
  class: end,
  values: $position-values
),
"translate-middle": (
  property: transform,
  class: translate-middle,
  values: (
    null: translate(-50%, -50%),
    x: translateX(-50%),
    y: translateY(-50%),
  )
),

前のページ
はみ出しユーティリティ

次のページ
陰影ユーティリティ

位置ユーティリティ（Position）

位置の値（Position values）

設定例

【設定】

要素の端からの位置（Arrange elements）v5.0.0-alpha2新設、v5.0.0-beta1一部クラス名変更

定義済クラスの種類

見本 見やすいよう色と枠を付けています

設定例

定義済クラスの組み合わせ

【設定】

【変更履歴】

要素を中央に配置（Center elements）v5.0.0-alpha2新設、v5.0.0-beta1クラス追加

見本 見やすいよう色と枠を付けています

設定例

定義済クラスの組み合わせ

見本 見やすいよう色と枠を付けています

設定例

定義済クラスの組み合わせ

【設定】

【変更履歴】

実例（Examples）

1.ボタンを装飾

見本

2.プログレスバーの両端と中央に円をつける v5.3.0設定変更

見本

Bootstrap5.3.0の設定例 緑背景が5.3.0での変更箇所

※Bootstrap5.2.xの設定例 赤背景が5.3.0での変更箇所

【変更履歴】

CSS v5.0.0-beta3追加、v5.3.0Sassから名称変更

Sassマップ（Sass maps）v5.3.0マップから名称変更

SassユーティリティAPI（Sass utilities API）v5.3.0ユーティリティAPIより名称変更

デフォルトの設定

ページ移動

見本見やすいよう色と枠を付けています

見本見やすいよう色と枠を付けています

見本見やすいよう色と枠を付けています

Bootstrap5.3.0の設定例緑背景が5.3.0での変更箇所

※Bootstrap5.2.xの設定例赤背景が5.3.0での変更箇所