Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。
境界ユーティリティ（Borders） v4.0.0新設 v4.3.0一部追加
境界ユーティリティを使用して、要素の border と border-radius を素早くスタイル。画像、ボタン、またはその他の要素に最適。
枠の罫線（Border）
罫線ユーティリティを使用して、要素枠の罫線を追加または削除。すべての罫線から選択するか、一度に1つずつ選択。
罫線を追加（Additive）
罫線の種類
四面全てに線：.border
●一面に線
上部に線：.border-top
右側に線：.border-right
下部に線：.border-bottom
左側に線：.border-left
●二面に線（複数設定）
右と下に線：.border-right.border-bottom
左と下に線：.border-left.border-bottom
右と上に線：.border-right.border-top
左と上に線：.border-left.border-top
左右に線：.border-left.border-right
上下に線：.border-top.border-bottom
設定例
<span class="border-top">...</span>【設定】
- 罫線を入れたい部分がある場合は、その要素に
.border(-{side})を入れる（.border(-{side})は上記「罫線の種類」から選択）
【注意】
.border,.border-{side}には、あらかじめ罫線の太さ（1px）、種類（solid）、色（$gray-300）の設定が組み込まれている
罫線を消す（Subtractive）
罫線の種類
線なし：.border.border-0
●三面に線
上部の線なし：.border.border-top-0
右側の線なし：.border.border-right-0
下部の線なし：.border.border-bottom-0
左側の線なし：.border.border-left-0
設定例
<span class="border border-top-0">...</span>【設定】
- 罫線を削除したい部分がある場合は、その要素に
.border(-{side})-0を入れる（.border(-{side})-0は上記「罫線の種類」から選択） .borderと組み合わせても可
【注意】
.border-{side}-0は、すでに罫線が入っている要素から部分的に罫線を削除する設定（テーブルの線を消すときなどに便利）
罫線の色（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-radius）v4.2.1一部追加
要素にクラスを追加すると、簡単に角を丸くすることが可能。
一部イメージ（Images）から分離。
角丸の種類
●画像に設定
すべて角丸：.rounded v4.0.0名称変更
●二面に角丸
上部が角丸：.rounded-top
右側が角丸：.rounded-right
下部が角丸：.rounded-bottom
左側が角丸：.rounded-left
円：.rounded-circle v4.0.0名称変更
長丸：.rounded-pill v4.2.1追加
角丸なし：.rounded-0
●三面に角丸（複数設定）
右下以外角丸：.rounded-top.rounded-left
左下以外角丸：.rounded-top.rounded-right
右上以外角丸：.rounded-bottom.rounded-left
左上以外角丸：.rounded-bottom.rounded-right
●背景色に設定
画像だけでなく、背景色にも設定することができます。
すべて角丸だとカードに背景色を設定したものと変わらないように見えますが、カードには枠線の色も設定が入っています。
円の場合はそのまま設定すると、このようになります。
長丸の場合は、このようになります。
正円の設定
設定例
画像に設定<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-white rounded-circle p-3" style="width: 100px;height: 100px;">正円の設定</p>
【設定】
- 設定したい要素に
.rounded(-{side})を入れる（.rounded(-{side})は上記「角丸の種類」から選択） - 正円の設定をする場合は、同じ大きさの幅（width）と高さ（height）のスタイル設定をしないと楕円になる。
【注意】
- 一面だけ角丸の設定は不可の模様（検証していない）
【Bootstrap3.xとの変更箇所】
- 全て角丸：
.img-rounded⇒.rounded - 円：
.img-circle⇒.rounded-circle
角丸の大きさ（Sizes）v4.3.0新設
より大きめまたはより小さめの角丸にするには、.rounded-lg または .rounded-sm を使用する。
大きさの種類
小さめの角丸：.rounded-sm
大きめの角丸：.rounded-lg
※標準（参考）：.rounded
設定例
<img src="..." alt="..." class="rounded-sm">
<img src="..." alt="..." class="rounded-lg">【設定】
- 設定したい要素に
.rounded-{size}を入れる（.rounded-{size}は上記「大きさの種類」から選択）
【注意】
.rounded-{size}は.roundedと組み合わせる必要はない
ページ移動
- 前のページ
ページがありません - 次のページ
クリアフィックス