bootstrap4 border – ボーダー

bootdtrap4で提供されているボーダーの紹介。

ボーダーの表示

<div class="border">All</div>
<div class="border-top">Top</div>
<div class="border-right">Right</div>
<div class="border-bottom">Bottom</div>
<div class="border-left">Left</div>

ボーダー非表示

<div class="border border-0">All</div>
<div class="border border-top-0">Top</div>
<div class="border border-right-0">Right</div>
<div class="border border-bottom-0">Bottom</div>
<div class="border border-left-0">Left</div>

ボーダーカラー

<div class="border border-primary">Primary</div>
<div class="border border-success">Success</div>
<div class="border border-danger">Danger</div>
<div class="border border-warning">Warning</div>
<div class="border border-light">Light</div>
<div class="border border-dark">Dark</div>
<div class="border border-white">White</div>

丸角

<div class="rounded">All</div>
<div class="rounded-circle">Circle</div>
<div class="rounded-pill">Pill</div>
<div class="rounded-0">None</div>