メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

境界ユーティリティ(Borders) v4.0.0新設 v4.3.0一部追加

境界ユーティリティを使用して、要素の borderborder-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-{themecolor} は、すでに罫線の設定(border)が入っている要素に色を付ける設定(テーブル、カードリストグループなどの枠線に色を付けるときなどに利用)

 

境界の角丸(Border-radius)v4.2.1一部追加

要素にクラスを追加すると、簡単に角を丸くすることが可能。
一部イメージ(Images)から分離。

角丸の種類

●画像に設定

プレースホルダ75x75 すべて角丸:.rounded v4.0.0名称変更

●二面に角丸

プレースホルダ75x75 上部が角丸:.rounded-top

プレースホルダ75x75 右側が角丸:.rounded-right

プレースホルダ75x75 下部が角丸:.rounded-bottom

プレースホルダ75x75 左側が角丸:.rounded-left

プレースホルダ75x75 円:.rounded-circle v4.0.0名称変更

プレースホルダ150x75 長丸:.rounded-pill v4.2.1追加

プレースホルダ75x75 角丸なし:.rounded-0

●三面に角丸(複数設定)

プレースホルダ75x75 右下以外角丸:.rounded-top.rounded-left

プレースホルダ75x75 左下以外角丸:.rounded-top.rounded-right

プレースホルダ75x75 右上以外角丸:.rounded-bottom.rounded-left

プレースホルダ75x75 左上以外角丸:.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)のスタイル設定をしないと楕円になる。

【注意】

  • 一面だけ角丸の設定は不可の模様(検証していない)

【変更履歴】

  • 【v4.0.0】
    • 全て角丸:.img-rounded.rounded
    • 円:.img-circle.rounded-circle

 

角丸の大きさ(Sizes)v4.3.0新設

より大きめまたはより小さめの角丸にするには、.rounded-lg または .rounded-sm を使用する。

大きさの種類

小さめの角丸の画像75x75 小さめの角丸:.rounded-sm

大きめの角丸の画像75x75 大きめの角丸:.rounded-lg

デフォルトの角丸の画像75x75 ※デフォルト(参考):.rounded

設定例
<img src="..." alt="..." class="rounded-sm">
<img src="..." alt="..." class="rounded-lg">

【設定】

  • 設定したい要素に .rounded-{size} を入れる(.rounded-{size} は上記「大きさの種類」から選択)

【注意】

  • .rounded-{size}.rounded と組み合わせる必要はない