ユーティリティ - とほほのBootstrap 5入門

背景(Background)
- グラデーション(Gradient)
- 透明度(Opacity)
ボーダー(Borders)
色(Colors)
- 透明度(Opacity)
ディスプレイ(Display)
- 印刷時指定(Display in print)
フレックス(Flex)
フロート(Float)
インタラクション(Interactions)
- テキストセレクション(Text selection)
- ポインターイベント(Pointer events)
不透明度(Opacity)
オーバーフロー(Overflow)
ポジション(Position)
- 位置のアレンジ(Arrange)
- 中央配置(Center)
影付き(Shadow)
サイジング(Sizing)
スペーシング(Spacing)
テキスト(Text)
vertical_alignment">縦方向位置(Vertical alignment)
ビジビリティ(Visibility)

.bg-{context} は primary, secondary などのコンテキストに応じた背景色を設定します。.bg-body は Bootstrap 5 で追加されたもので、<body> の背景色を示しますが、Bootstrap 5.1 では暗めの色になってしまいます。Bootstrap 5.1.1 で修正される予定だそうです。

Example

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-body

.bg-white

.bg-transparent

Code

<div class="p-1 mb-1 bg-primary text-white">.bg-primary</div>
<div class="p-1 mb-1 bg-secondary text-white">.bg-secondary</div>
<div class="p-1 mb-1 bg-success text-white">.bg-success</div>
<div class="p-1 mb-1 bg-danger text-white">.bg-danger</div>
<div class="p-1 mb-1 bg-warning text-dark">.bg-warning</div>
<div class="p-1 mb-1 bg-info text-dark">.bg-info</div>
<div class="p-1 mb-1 bg-light text-dark">.bg-light</div>
<div class="p-1 mb-1 bg-dark text-white">.bg-dark</div>
<div class="p-1 mb-1 bg-body text-dark">.bg-body</div>
<div class="p-1 mb-1 bg-white text-dark">.bg-white</div>
<div class="p-1 mb-1 bg-transparent text-dark">.bg-transparent</div>

.bg-gradient を指定すると、すこしグラデーションがかかった背景色になります。

Example

.bg-primary

.bg-secondary

.bg-success

Code

<div class="p-1 mb-1 bg-primary bg-gradient text-white">.bg-primary</div>
<div class="p-1 mb-1 bg-secondary bg-gradient text-white">.bg-secondary</div>
<div class="p-1 mb-1 bg-success bg-gradient text-white">.bg-success</div>

.bg-opacity-{75|50|25|10} または --bs-bg-opacity を指定することで透明度を指定することができます。

Example

This is default success background

This is 75% opacity success background

This is 50% opacity success background

This is 25% opacity success background

This is 10% opacity success background

This is 8% opacity success background

Code

<div class="bg-success p-1 text-white">This is default success background</div>
<div class="bg-success p-1 text-white bg-opacity-75">This is 75% opacity success background</div>
<div class="bg-success p-1 text-dark bg-opacity-50">This is 50% opacity success background</div>
<div class="bg-success p-1 text-dark bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success p-1 text-dark bg-opacity-10">This is 10% opacity success background</div>
<div class="bg-success p-1 text-dark" style="--bs-bg-opacity: 8%">This is 8% opacity success background</div>

.border は全方向、.border-{top|bottom|start|end} は指定方向にボーダー(枠線)を表示します。

Example

border top end bottom start

Code

<span class="p-1 border border-secondary">border</span>
<span class="p-1 border-top border-secondary">top</span>
<span class="p-1 border-end border-secondary">end</span>
<span class="p-1 border-bottom border-secondary">bottom</span>
<span class="p-1 border-start border-secondary">start</span>

.border-0 は全方向、.border-{top|bottom|start|end}-0 は指定方向のボーダーを非表示にします。

Example

border top end bottom start

Code

<span class="p-1 border border-0 border-secondary">border</span>
<span class="p-1 border border-top-0 border-secondary">top</span>
<span class="p-1 border border-end-0 border-secondary">end</span>
<span class="p-1 border border-bottom-0 border-secondary">bottom</span>
<span class="p-1 border border-start-0 border-secondary">start</span>

.border-{context} は、コンテキストに応じたボーダー色を指定します。

Example

Primary Secondary Success Danger Warning Info Light Dark White

Code

<span class="p-1 border border-primary">Primary</span>
<span class="p-1 border border-secondary">Secondary</span>
<span class="p-1 border border-success">Success</span>
<span class="p-1 border border-danger">Danger</span>
<span class="p-1 border border-warning">Warning</span>
<span class="p-1 border border-info">Info</span>
<span class="p-1 border border-light">Light</span>
<span class="p-1 border border-dark">Dark</span>
<span class="p-1 border border-white">White</span>

.border-{1|2|3|4|5} はボーダーの太さを指定します。

Example

1 2 3 4 5

Code

<span class="p-1 border border-1 border-secondary">1</span>
<span class="p-1 border border-2 border-secondary">2</span>
<span class="p-1 border border-3 border-secondary">3</span>
<span class="p-1 border border-4 border-secondary">4</span>
<span class="p-1 border border-5 border-secondary">5</span>

.rounded, .rounded-{top|bottom|start|end|circle|pill} はボーダーの角を丸くします。

Example

... top bottom start end circle pill

Code

<span class="p-2 border rounded border-secondary">...</span>
<span class="p-2 border rounded-top border-secondary">top</span>
<span class="p-2 border rounded-bottom border-secondary">bottom</span>
<span class="p-2 border rounded-start border-secondary">start</span>
<span class="p-2 border rounded-end border-secondary">end</span>
<span class="p-2 border rounded-circle border-secondary">circle</span>
<span class="p-2 border rounded-pill border-secondary">pill</span>

.rounded-{0|1|2|3} は角丸の丸さ加減を指定します。

Example

0 1 2 3

Code

<span class="p-2 border rounded-0 border-secondary">0</span>
<span class="p-2 border rounded-1 border-secondary">1</span>
<span class="p-2 border rounded-2 border-secondary">2</span>
<span class="p-2 border rounded-3 border-secondary">3</span>

.text-{context} はテキストに対してコンテキストに応じた色を設定します。

Example

primary secondary success danger warning info light dark body muted white black-50 white-50

Code

<span class="text-primary">primary</span>
<span class="text-secondary">secondary</span>
<span class="text-success">success</span>
<span class="text-danger">danger</span>
<span class="text-warning bg-dark px-1">warning</span>
<span class="text-info bg-dark px-1">info</span>
<span class="text-light bg-dark px-1">light</span>
<span class="text-dark">dark</span>
<span class="text-body">body</span>
<span class="text-muted">muted</span>
<span class="text-white bg-dark px-1">white</span>
<span class="text-black-50">black-50</span>
<span class="text-white-50 bg-dark px-1">white-50</span>

--bs-text-opacity でテキスト色の透明度を指定することができます。

Example

100% 60%

Code

<span class="text-primary">100%</span>
<span class="text-primary" style="--bs-text-opacity:.6;">60%</span>

.d-{value}, .d-{breakpoint}-{value} は CSS の display: に指定する値を設定します。{value} には none, inline, inline-block, block, grid, table, table-cell, table-row, flex, inline-flex のいずれかを指定します。

Example

inline

Code

<div class="d-inline-block p-2 bg-secondary text-white">inline</div>
<div class="d-inline-block p-2 bg-secondary text-white">inline</div>

.d-print-{value} は印刷時のディスプレイ指定を行います。下記は、画面には表示されるけれども印刷時には印刷しないコンテンツを指定しています。

Code

<div class="d-print-none">...</div>

.d-flex は子要素をフレックスアイテムとして並べます。

Example

One

Two

Three

Code

<div class="d-flex">
  <div class="border border-secondary px-2">One</div>
  <div class="border border-secondary px-2">Two</div>
  <div class="border border-secondary px-2">Three</div>
</div>

.d-inline-flex は親要素自体をインラインブロックとして表示します。

Example

d-flex

d-inline-flex

Code

<div class="d-flex border border-secondary mb-2 px-e">d-flex</div>
<div class="d-inline-flex border border-secondary px-2">d-inline-flex</div>

.d-{breakpoint}-flex, .d-{breakpoint}-inline-flex は画面横幅のブレークポイントに応じてフレックス適用の有無を制御します。下記の例では画面サイズが sm 以上の場合に子要素を横並びにします。

Example

One

Two

Three

Code

.flex-row はフレックスアイテムを横方向に、.flex-column は縦方向に並べます。

Example

One

Two

Three

One

Two

Three

Code

<div class="d-flex flex-row mb-2">
  <div class="border border-secondary px-2">One</div>
  <div class="border border-secondary px-2">Two</div>
  <div class="border border-secondary px-2">Three</div>
</div>
<div class="d-flex flex-column">
  <div class="border border-secondary px-2">One</div>
  <div class="border border-secondary px-2">Two</div>
  <div class="border border-secondary px-2">Three</div>
</div>

.flex-{row|column}-reverse, .flex-{breakpoint}-{row|column}-reverse はフレックスアイテムを逆順に並べます。

Example

One

Two

Three

One

Two

Three

Code

<div class="d-flex flex-row mb-2">
  <div class="border border-secondary px-2">One</div>
  <div class="border border-secondary px-2">Two</div>
  <div class="border border-secondary px-2">Three</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="border border-secondary px-2">One</div>
  <div class="border border-secondary px-2">Two</div>
  <div class="border border-secondary px-2">Three</div>
</div>

.justify-content-{value}, .justify-content-{breakpoint}-{value} はフレックスアイテムの配置を指定します。{value} には start, end, center, between, around, evenly のいずれかを指定します。

Example

start

end

center

between

around

evenly

Code

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>

.align-items-{value}, .align-items-{breakpoint}-{value} はフレックスアイテムの縦方向の位置を指定します。{value} には start, end, center, baseline, stretch のいずれかを指定します。start はアイテムの上端を揃えるのに対し、baseline はアイテム内テキストのベースラインを揃える点が異なります。

Example

start

end

center

baseline

stretch

Code

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

.align-self-{value}, .align-self-{breakpoint}-{value} もフレックスアイテムの縦位置を指定します。.align-items がフレックスアイテムの親要素に指定するのに対して、.align-self はフレックスアイテム自体に対して指定する点が異なります。

Example

start

end

center

baseline

stretch

Code

<div class="d-flex" style="height:4rem">
  <div class="border border-secondary px-2 align-self-start">start</div>
  <div class="border border-secondary px-2 align-self-end">end</div>
  <div class="border border-secondary px-2 align-self-center">center</div>
  <div class="border border-secondary px-2 align-self-baseline">baseline</div>
  <div class="border border-secondary px-2 align-self-stretch">stretch</div>
</div>

.align-content-{start|end|center|between|around|stretch}, .align-content-{breakpoint}-{start|end|center|between|around|stretch} は、フレックスアイテム行の縦位置を指定します。.align-items-* と同様、親アイテムに対して指定します。.align-items-* が行の中の各フレックスアイテムの縦位置を指定するのに対し、.align-content-* はフレックスアイテムの行自体の縦位置を指定します。詳細はフレックス・グリッドのレイアウトを参照してください。

Example

1

2

3

Code

<div class="d-flex flex-wrap my-box align-content-center" style="height:8rem">
  <div class="border border-secondary px-2" style="height:5rem; width:5rem;">1</div>
  <div class="border border-secondary px-2" style="height:4rem; width:4rem;">2</div>
  <div class="border border-secondary px-2" style="height:2rem; width:2rem;">3</div>
</div>

.flex-fill, .flex-{breakpoint}-fill はフレックスアイテム自体に指定して、アイテムの横幅を可能な量だけ引き伸ばします。

Example

One

Two

Three

Code

<div class="d-flex">
  <div class="border border-secondary px-2">One</div>
  <div class="flex-fill border border-secondary px-2">Two</div>
  <div class="border border-secondary px-2">Three</div>
</div>

.flex-{grow|shrink}-{0|1}, .flex-{breakpoint}-{grow|shrink}-{0|1} はフレックスアイテムを伸ばす(grow)か縮める(shrink)かを指定します。

Example

A

B

Code

<div class="d-flex">
 <div class="border border-secondary px-2 flex-grow-1">A</div>
 <div class="border border-secondary px-2">B</div>
</div>

.m{s|e}-auto はテキストの開始方向(s)または終了方向(e)に可能なだけのマージンをとります。

Example

A

B

C

Code

<div class="d-flex">
  <div class="border border-secondary px-2">A</div>
  <div class="border border-secondary px-2 ms-auto">B</div>
  <div class="border border-secondary px-2">C</div>
</div>

.flex-wrap はフレックスアイテムが親要素の横幅に収まらない場合自動改行を行います。.flex-nowrap は自動改行を抑止します。

Example

A

B

C

A

B

C

Code

<div class="d-flex flex-nowrap mb-2" style="width:10rem">
  <div class="border border-secondary px-4">A</div>
  <div class="border border-secondary px-4">B</div>
  <div class="border border-secondary px-4">C</div>
</div>
<div class="d-flex flex-wrap" style="width:10rem">
  <div class="border border-secondary px-4">A</div>
  <div class="border border-secondary px-4">B</div>
  <div class="border border-secondary px-4">C</div>
</div>

.order-{0|1|2|3|4|5}, .order-{breakpoint}-{0|1|2|3|4|5} はフレックスアイテムを表示する順序を制御します。

Example

1

2

3

Code

<div class="d-flex">
  <div class="order-2 border border-secondary px-2">1</div>
  <div class="order-3 border border-secondary px-2">2</div>
  <div class="order-1 border border-secondary px-2">3</div>
</div>

.float-{start|end|none}, .float-{breakpoint}-{start|end|none} は、画像などのコンテンツの周りにテキストを回り込ませる際に使用します。start はコンテンツをテキストの開始方向(日本では左方向)に配置し、テキストを終了方向(日本では右方向)に回り込ませます。end はその逆です。none は回り込ませません。.clearfix はテキストの回り込みを終了させます。

Example

テキストテキスト

Code

<div class="clearfix border border-secondary me-2 p-2">
  <div class="float-start me-2"><img src="../image/80x80.png" alt="image"></div>
  テキストテキスト
</div>
<div class="clearfix border border-secondary me-2 p-2">
  <div class="float-end ms-2"><img src="../image/80x80.png" alt="image"></div>
  テキストテキスト
</div>
<div class="clearfix border border-secondary p-2">
  <div class="float-none mb-2"><img src="../image/80x80.png" alt="image"></div>
  テキストテキスト
</div>

.user-select-auto はブラウザがサポートする通常の選択ができます。.user-select-all はクリックするとその全文が選択されます。.user-select-none はコンテンツを選択させません。

Example

デフォルトの選択

クリックで出全文選択

選択できない文章

Code

<div class="user-select-auto">デフォルトの選択</div>
<div class="user-select-all">クリックで出全文選択</div>
<div class="user-select-none">選択できない文章</div>

.pe-none はリンクなどをマウスでクリックできなくします。.pe-auto は通常の動作に戻します。

Example

クリックできないリンク

クリックできるリンク

Code

<div class="pe-none"><a href="#">クリックできないリンク</a></div>
<div class="pe-auto"><a href="#">クリックできるリンク</a></div>

.opacity-{0|25|50|75|100} は不透明度を指定します。100 は完全に不透明、0 は完全に透明になります。

Example

不透明度 100%

不透明度 75%

不透明度 50%

不透明度 25%

不透明度 0%

Code

<div class="opacity-100">不透明度 100%</div>
<div class="opacity-75">不透明度 75%</div>
<div class="opacity-50">不透明度 50%</div>
<div class="opacity-25">不透明度 25%</div>
<div class="opacity-0">不透明度 0%</div>

.overflow-{auto|hidden|visible|scroll} は親コンテンツの高さに子コンテンツがあふれた場合の動作を指定します。auto はデフォルトの動作、hidden はあふれた部分を非表示にします。visible はあふれた部分も表示します。scroll はあふれた部分をスクロールで表示します。

Example

いろはにほへと　ちりぬるをわかよたれそ　つねならむうゐのおくやま　けふこえてあさきゆめみし　ゑひもせす

Code

<div class="border border-secondary overflow-auto" style="width:8rem; height:5rem;">
  いろはにほへと　ちりぬるを わかよたれそ　つねならむ うゐのおくやま　けふこえて あさきゆめみし　ゑひもせす 
</div>
<div class="border border-secondary overflow-hidden" style="width:8rem; height:5rem;">
  いろはにほへと　ちりぬるを わかよたれそ　つねならむ うゐのおくやま　けふこえて あさきゆめみし　ゑひもせす 
</div>
<div class="border border-secondary overflow-visible" style="width:8rem; height:5rem;">
  いろはにほへと　ちりぬるを わかよたれそ　つねならむ うゐのおくやま　けふこえて あさきゆめみし　ゑひもせす 
</div>
<div class="border border-secondary overflow-scroll" style="width:8rem; height:5rem;">
  いろはにほへと　ちりぬるを わかよたれそ　つねならむ うゐのおくやま　けふこえて あさきゆめみし　ゑひもせす 
</div>

.position-{static|relative|absolute|fixed|sticky} はコンテンツの位置決めのルールを指定します。詳細は CSS の position を参照してください。

Code

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

{top|bottom|start|end}-{0|50|100} は、コンテンツを上部(top), 下部(bottom), テキストの開始方向(start), テキストの終了方向(end)から、0%、50%、100% の隙間を開けてコンテンツを表示します。

Example

A

Code

<div class="border border-secondary position-relative" style="height:4rem">
  <span class="border border-secondary px-2 position-absolute top-50 start-50">A</span>
</div>

.top-50, .start-50 だけだとコンテンツの上端が中央となるため、コンテンツ自体は中央には表示されません。.translate-middle, .translate-middle-{x|y} を指定することにより、CSS の translateX(-50%), translateY(-50%) を使用してコンテンツ自体を中央に表示することができます。

Example

A

Code

<div class="border border-secondary position-relative" style="height:4rem">
  <span class="border border-secondary px-2 position-absolute top-50 start-50 translate-middle">A</span>
</div>

.shadow, .shadow-{sm|lg} は要素に影をつけます。.shadow-none は影を消去します。ディスプレイによっては影が薄すぎてあまり見えないことがあります。

Example

Code

<div class="d-flex gap-5">
  <div class="bg-secondary shadow-none" style="height:4rem; width:4rem;"></div>
  <div class="bg-secondary shadow-sm" style="height:4rem; width:4rem;"></div>
  <div class="bg-secondary shadow" style="height:4rem; width:4rem;"></div>
  <div class="bg-secondary shadow-lg" style="height:4rem; width:4rem;"></div>
</div>

.{w|mw|vw|min-vw|h|mh|vh|min-vh}-{25|50|75|100|auto} は幅と高さを指定します。w は width, mw は max-width, vw は view-width, h は height, mh は max-height, vh は view-height を示します。{25|50|75|100} はそれぞれ 25%, 50%, 75%, 100% を、auto は自動調整を意味します。

Example

50% 50%

Code

<div class="border border-secondary w-50 h-50">50% 50%</div>

.{m|p}{t|b|s|e|x|y}-{0|1|2|3|4|5|auto} はマージンパディングを指定します。{m|p} は、マージン(m:margin)、パディング(p:padding)を意味します。{t|b|s|e|x|y} は上方向(t:top)、下方向(b:bottom)、テキストの開始方向(日本では左方向)(s:start)、テキストの終了方向(日本では右方向)(e:end)、横方向(左右)(x)、縦方向(上下)(y)を意味します。auto はスペースを自動算出します。例えば mb-3 は下方向に 3の大きさのマージンをとることを意味します。方向を省略すると上下左右全方向となります。例えば m-3 は全方向に 3の大きさのマージンをとります。

Example

Code

<div class="d-flex">
  <div class="bg-secondary me-1" style="height:3rem; width:3rem"></div>
  <div class="bg-secondary me-2" style="height:3rem; width:3rem"></div>
  <div class="bg-secondary me-3" style="height:3rem; width:3rem"></div>
  <div class="bg-secondary me-4" style="height:3rem; width:3rem"></div>
  <div class="bg-secondary me-5" style="height:3rem; width:3rem"></div>
  <div class="bg-secondary me-auto" style="height:3rem; width:3rem"></div>
  <div class="bg-secondary" style="height:3rem; width:3rem"></div>
</div>

.text-{start|center|end}, .text-{breakpoint}-{start|center|end} はテキストの横方向の位置を指定します。

Example

Start

Center

End

Code

<div class="text-start">Start</div>
<div class="text-center">Center</div>
<div class="text-end">End</div>

.text-nowrap はテキストを折り返ししません。.text-wrap は折り返しします。

Example

このテキストは折り返しされます。

このテキストは折り返しされません。

Code

<div class="d-flex gap-3">
  <div class="my-box text-wrap" style="width:5rem">
   このテキストは折り返しされます。
  </div>
  <div class="my-box text-nowrap" style="width:5rem">
   このテキストは折り返しされません。
  </div>
</div>

.text-break は単語の途中であっても自動改行するようになります。

Example

Thisisthelonglonglonglonglonglonglonglonglonglongword

Code

<div class="border border-secondary mb-2" style="width:10rem">
Thisisthelonglonglonglonglonglonglonglonglonglongword
</div>
<div class="text-break border border-secondary" style="width:10rem">
Thisisthelonglonglonglonglonglonglonglonglonglongword
</div>

.text-lowercase はすべてを小文字に、.text-uppercase はすべてを大文字に、.text-capitalize は単語の先頭を大文字に変換します。

Example

This is a pen.

Code

<div class="text-lowercase">This is a pen.</div>
<div class="text-uppercase">This is a pen.</div>
<div class="text-capitalize">This is a pen.</div>

.fs-{1|2|3|4|5|6} はフォントサイズを変更します。

Example

fs-1 fs-2 fs-3 fs-4 fs-5 fs-6

Code

<span class="fs-1">fs-1</span> <span class="fs-2">fs-2</span>
<span class="fs-3">fs-3</span> <span class="fs-4">fs-4</span>
<span class="fs-5">fs-5</span> <span class="fs-6">fs-6</span>

.fw-{bold|bolder|normal|light|lighter} はフォントの太さを指定します。bolder, lighter は親要素の太さに対して相対的に作用します。.fst-{italic|normal} はフォントのスタイルを指定します。

Example

Bold Bolder Normal Lighter Light Normal Italic

Code

<span class="fw-bold">Bold</span>
<span class="fw-bolder">Bolder</span>
<span class="fw-normal">Normal</span>
<span class="fw-lighter">Lighter</span>
<span class="fw-light">Light</span>
<span class="fst-normal">Normal</span>
<span class="fst-italic">Italic</span>

.lh-{1|sm|base|lg} はラインの高さを指定します。

Example

This is a long paragraph written to show how the line-height of an element is ...

Code

<div class="d-flex gap-2">
  <div class="lh-1 p-1 border border-secondary">...</div>
  <div class="lh-sm p-1 border border-secondary">...</div>
  <div class="lh-base p-1 border border-secondary">...</div>
  <div class="lh-lg p-1 border border-secondary">...</div>
</div>

.font-monospace は等幅フォントを指定します。

Example

This is a pen.

Code

<div>This is a pen.</div>
<div class="font-monospace">This is a pen.</div>

.text-reset はテキスト色が親要素から継承されることを抑止します。

Example

このリンク付きテキストは破棄されています。

Code

<div class="text-muted">
  この <a href="#" class="text-reset">リンク</a> 付きテキストは破棄されています。
</div>

.text-decoration-underline は下線を、.text-decoration-line-through は打消し線を弾きます。.text-decoration-none は下線も打消し線もひきません。

Example

下線付きテキスト

打消し線付きテキスト

通常テキスト

Code

<div class="text-decoration-underline">下線付きテキスト</div>
<div class="text-decoration-line-through">打消し線付きテキスト</div>
<div class="text-decoration-none">通常テキスト</div>

.align-{top|middle|bottom|baseline|text-top|text-bottom} は要素の縦方向の位置を指定します。top は上部、middle は中央、bottom は下部に配置します。baseline は親要素のテキストのベースラインに要素のベースラインを、text-top は親要素のテキストの上限に要素の上限を、text-bottom は親要素のテキストの下限に要素の下限を合わせます。

Example

top

middle

bottom

漢字xyz text-top baseline text-bottom

Code

<table class="mb-2" style="height:4rem">
  <tr>
    <td class="border px-2 align-top">top</td>
    <td class="border px-2 align-middle">middle</td>
    <td class="border px-2 align-bottom">bottom</td>
  </tr>
</table>
<div>
  <span style="line-height:4rem">漢字xyz</span>
  <span class="border px-2 fs-6 align-text-top">text-top</span>
  <span class="border px-2 fs-6 align-baseline">baseline</span>
  <span class="border px-2 fs-6 align-text-bottom">text-bottom</span>
</div>

.visible は要素を表示します。.invisible は要素を非表示にします。

Example

Visible

Invisible

Code

<div class="visible">Visible</div>
<div class="invisible">Invisible</div>

ユーティリティ(Utilities)

目次

背景(Background)

グラデーション(Gradient)

透明度(Opacity)

ボーダー(Borders)

線無し(Subtractive)

ボーダー色(Border color)

ボーダーの太さ(Border width)

角丸(Border radius)

角丸サイズ(Sizes)

色(Colors)

透明度(Opacity)

ディスプレイ(Display)

印刷時指定(Display in print)

フレックス(Flex)

インライン(Inline)

ブレークポイント(Breakpoint)

横方向・縦方向(Row & column)

逆方向(Reverse)

横方向配置(Justify)

縦方向配置(Align items)

縦方向位置(Align self)

縦方向位置(Align content)

引き伸ばし(Fill)

グローとシュリンク(Grow and shrink)

マージン(Margins)

ワードラップ(Wrap)

順序(Order)

フロート(Float)

インタラクション(Interactions)

テキストセレクション(Text selection)

ポインターイベント(Pointer events)

不透明度(Opacity)

オーバーフロー(Overflow)

ポジション(Position)

位置のアレンジ(Arrange)

中央配置(Center)

影付き(Shadow)

サイジング(Sizing)

スペーシング(Spacing)

テキスト(Text)

アライメント(Text alignment)

折り返し(Text wrap)

ワードブレイク(Word break)

テキスト変換(Text transform)

フォントサイズ(Font size)

フォントウェイト・スタイル(Font weight and style)

ラインの高さ(Line height)

等幅フォント(Monospace)

リセットカラー(Reset color)

テキストデコレーション(Text decoration)

縦方向位置(Vertical alignment)

ビジビリティ(Visibility)