【Bootstrapの基本要素】ボーダー（Borders）について

記事内に商品プロモーションを含む場合があります

本記事では、Bootstrapのボーダー（Borders）について解説していきます。

使用頻度の高い、ボーダーのクラスはこちらです。

・border-色

・rounded

・rounded-lg

・rounded-circle

・rounded-pill

アルファベットから、おおよその予想はつくと思いますが、それぞれについてみていきましょう。

border-色

色をつけるクラスです。
border-色

1. 　　<div class=“container”>
2.       　<img src=“https://placehold.jp/75×75.png” class=“border border-primary” alt=“”>
3.       　<img src=“https://placehold.jp/75×75.png” class=“border border-secondary” alt=“”>
4.       　<img src=“https://placehold.jp/75×75.png” class=“border border-success” alt=“”>
5.       　<img src=“https://placehold.jp/75×75.png” class=“border border-danger” alt=“”>
6.       　<img src=“https://placehold.jp/75×75.png” class=“border border-warning” alt=“”>
7.       　<img src=“https://placehold.jp/75×75.png” class=“border border-info” alt=“”>
8.       　<img src=“https://placehold.jp/75×75.png” class=“border border-light” alt=“”>
9.       　<img src=“https://placehold.jp/75×75.png” class=“border border-dark” alt=“”>
10.       　<img src=“https://placehold.jp/75×75.png” class=“border border-white” alt=“”>
11.     </div>

 

ボーダーに色がついていることが分かります。

rounded

角丸ボーダーにするクラスです。
rounded

1. <div class=“container”>
2.       <img src=“https://placehold.jp/75×75.png” class=“rounded” alt=“”>
3. </div>

 

画像では見づらいかもしれませんが、角丸ボーダーになっていることが分かります。

rounded-lg

lgをつけることで、少し大きい角丸ボーダーになります。
rounded-lg

1. <div class=“container”>
2.       <img src=“https://placehold.jp/75×75.png” class=“rounded” alt=“”>
3.       <img src=“https://placehold.jp/75×75.png” class=“rounded-lg” alt=“”>
4.     </div>

 

こちらもちょっと分かりづらいかもしれませんが、左側が通常のボーダー、右側が少し大きめの角丸ボーダーです。
ちなみに数値化すると、0.05remほど大きくなっています（分かりづらい）。

rounded-circle

こちらは円ですね。
rounded-circle

1. <div class=“container”>
2.       <img src=“https://placehold.jp/75×75.png” class=“rounded” alt=“”>
3.       <img src=“https://placehold.jp/75×75.png” class=“rounded-circle” alt=“”>
4.     </div>

 

これは見て明らかですね。

rounded-pill

最後はカプセル型のボーダーです。

rounded-pill

1. <div class=“container”>
2.       <img src=“https://placehold.jp/300×150.png” class=“rounded” alt=“”>
3.       <img src=“https://placehold.jp/300×150.png” class=“rounded-pill” alt=“”>
4.     </div>

 

クスリのカプセルのような形になりました。

まとめ

Bootstrapのボーダー（Bordres）について解説しました。

もう一度まとめると・・・

・border-色

・rounded

・rounded-lg

・rounded-circle

・rounded-pill

このような感じでした。

なお、Bootstrapの公式ドキュメントはこちらをご参考ください。