Borders

XS

Portrait Phones
<576px

SM

Landscape Phones
≥576px to <768px

MD

Tablets
≥768px to <992px

LG

Laptops
≥992px to <1200px

XL

Desktops
≥1200px

Border

.border & .border-* = { top, end, bottom, start }

border border-top border-end border-bottom border-start

Note

  • To eliminate border just add -0 for example bottom-end-0

  • To add color:
    .border-primary
    .border-secondary
    .border-warning and so on...
  • To add width:
    .border-1
    .border-2
    .border-3
    .border-4
    .border-5
  • To change sizes from rounded corners:
    .rounded-0
    .rounded-1
    .rounded-2
    .rounded-3

Border radius

.rounded & .rounded-* = { top, end, bottom, start, circle, pill }
... ... ... ... ... ... ...
Border
<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
Border radius
<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-end" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-start" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">