枠の罫線(Border)v5.0.0-beta1一部クラス名変更
罫線ユーティリティを使用して、要素枠の罫線を追加や削除。すべての罫線から選択するか、一度に1つずつ選択。
罫線を追加(Additive)
罫線の種類
四面全てに線:.border
●一面に線
上部に線:.border-top
行末側に線:.border-end
v5.0.0-beta1クラス名変更
下部に線:.border-bottom
行頭側に線:.border-start
v5.0.0-beta1クラス名変更
●二面に線(複数設定)
行末と下に線:.border-end.border-bottom
行頭と下に線:.border-start.border-bottom
行末と上に線:.border-end.border-top
行頭と上に線:.border-start.border-top
左右に線:.border-start.border-end
上下に線:.border-top.border-bottom
設定例
<span class="border-top">...</span>
【設定】
- 罫線を入れたい部分がある場合は、その要素に
.border(-{side})
を入れる(.border(-{side})
は上記「罫線の種類」から選択)
【注意】
.border
,.border-{side}
には、あらかじめ罫線の太さ(1px
)、種類(solid
)、色($gray-300
)の設定が組み込まれている
【変更履歴】
- 【v5.0.0-beta1】
- RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
- 行頭側に線:
.border-left
⇒.border-start
- 行末側に線:
.border-right
⇒.border-end
- 行頭側に線:
- RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
罫線を消す(Subtractive)
罫線の種類
線なし:.border.border-0
●三面に線
上部の線なし:.border.border-top-0
行末側の線なし:.border.border-end-0
v5.0.0-beta1クラス名変更
下部の線なし:.border.border-bottom-0
行頭側の線なし:.border.border-start-0
v5.0.0-beta1クラス名変更
設定例
<span class="border border-top-0">...</span>
【設定】
- 罫線を削除したい部分がある場合は、その要素に
.border(-{side})-0
を入れる(.border(-{side})-0
は上記「罫線の種類」から選択) .border(-{side})-0
単独で使用可能(.border
と組み合わせても可)
【注意】
.border-{side}-0
は、すでに罫線が入っている要素から部分的に罫線を削除する設定(テーブルの線を部分的に消すときなどに便利)
【変更履歴】
- 【v5.0.0-beta1】
- RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
- 行頭側の線なし:
.border-left-0
⇒.border-start-0
- 行末側の線なし:
.border-right-0
⇒.border-end-0
- 行頭側の線なし:
- RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
罫線の色(Border color)
テーマカラーで構築されたユーティリティを使用して罫線の色を変更。
枠の色の種類
.border-primary
.border-secondary
.border-success
.border-info
.border-warning
.border-danger
.border-light
※色が見やすいように背景色と空白をつけています
.border-dark
.border-white
※色が見やすいように背景色と空白をつけています
設定例
<span class="border border-primary">...</span>
【設定】
- 罫線を色付けしたい要素に
.border-{themecolor}
を入れる(.border-{themecolor}
は上記「色の種類」から選択) {themecolor}
は、primary
,secondary
,success
,info
,warning
,danger
,light
,dark
,white
のいずれかを選択.border-{themecolor}
単独で使用可能(.border
と組み合わせても可)
【注意】
罫線の太さ(Border-width)v5.0.0-alpha2新設
罫線の種類
.border.border-1
(border-width: 1px
)
.border.border-2
(border-width: 2px
)
.border.border-3
(border-width: 3px
)
.border.border-4
(border-width: 4px
)
.border.border-5
(border-width: 5px
)
設定例
<span class="border border-1">...</span>
【設定】
- 罫線を設定したい部分の要素に
.border.border-{size}
を入れる(.border-{size}
は上記「罫線の種類」から選択)
境界の角丸(Border-radius)v5.0.0-beta1一部クラス名変更
要素にクラスを追加すると、簡単に角を丸くすることが可能。
角丸の種類
●画像に設定
すべて角丸:.rounded
●二面に角丸
上部が角丸:.rounded-top
行末側が角丸:.rounded-end
v5.0.0-beta1クラス名変更
下部が角丸:.rounded-bottom
行頭側が角丸:.rounded-start
v5.0.0-beta1クラス名変更
円:.rounded-circle
長丸:.rounded-pill
●三面に角丸(複数設定)
行末下以外角丸:.rounded-top.rounded-start
行頭下以外角丸:.rounded-top.rounded-end
行末上以外角丸:.rounded-bottom.rounded-start
行頭上以外角丸:.rounded-bottom.rounded-end
●背景色に設定
画像だけでなく、背景色にも設定することができます。
すべて角丸だとカードに背景色を設定したものと変わらないように見えますが、カードには枠線の色も設定が入っています。
円の場合はそのまま設定すると、このようになります。
長丸の場合は、このようになります。
正円の設定
Bootstrap5.xの設定例 緑背景が変更箇所
画像に設定<img src="..." alt="..." class="rounded-top">
背景色に設定<p class="bg-warning text-white rounded p-3">画像だけでなく、背景色にも設定することができます。....</p>
<p class="bg-danger text-white rounded-circle p-3">円の場合はそのまま設定すると、このようになります。</p>
<p class="bg-success text-white rounded-pill p-3">長丸の場合は、このようになります。</p>
<p class="bg-info text-dark rounded-circle position-relative" style="width:6rem;height:6rem;"><span class="position-absolute top-50 start-50 translate-middle text-nowrap">正円の設定</span></p>
【設定】
- 設定したい要素に
.rounded(-{side})
を入れる(.rounded(-{side})
は上記「角丸の種類」から選択) - 正円の設定をする場合は、同じ大きさの幅(width)と高さ(height)のスタイルを同じ設定にしないと楕円になる。
【注意】
- 一面だけ角丸の設定は不可の模様(検証していない)
【変更履歴】
- 【v5.0.0-alpha3】
- 正円の設定を調整(変換ユーティリティクラス等を使用)
- 【v5.0.0-beta1】
- RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
- 行頭側が角丸:
.rounded-left
⇒.rounded-start
- 行末側が角丸:
.rounded-right
⇒.rounded-end
- 行頭側が角丸:
- RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
角丸の大きさ(Sizes)v5.0.0-alpha3クラス名変更
大きなまたは小さな丸角にはスケーリングクラスを使用。サイズの範囲は 0
から 3
で、ユーティリティAPIを変更することで構成可能。
大きさの種類
角丸なし:.rounded-0
(border-radius: 0
)
小さめの角丸:.rounded-1
(border-radius: .2rem
)v5.0.0-alpha3クラス名変更
標準の角丸:.rounded-2
(border-radius: .25rem
、デフォルトでは .rounded
と同じ)
大きめの角丸:.rounded-3
(border-radius: .3rem
)v5.0.0-alpha3クラス名変更
設定例
<img src="..." alt="..." class="rounded-0">
<img src="..." alt="..." class="rounded-1">
<img src="..." alt="..." class="rounded-2">
<img src="..." alt="..." class="rounded-3">
【設定】
- 設定したい要素に
.rounded-{size}
を入れる(.rounded-{size}
は上記「大きさの種類」から選択)
【注意】
.rounded-{size}
は.rounded
と組み合わせる必要はない
【変更履歴】
- 【v5.0.0-alpha3】
.rounded-sm
⇒.rounded-1
.rounded-lg
⇒.rounded-3