【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の公式ドキュメントはこちらをご参考ください。