You can add solid borders to an element using following classes. You're able to change the border color using border color utility classes.
The classes follows b{side}-{size} format, where {size}is one of 0, 1, 2, or 3values. Also, {side}is one of:
-
t: Border top -
b: Border bottom -
l: Border left -
r: Border right -
x: Border left and right -
y: Border top and bottom - null: All sides
Following table demonstrates available classes for 1px border.
| Class name | Description |
|---|---|
.bt-1
|
border-top: 1px solid ... |
.bb-1
|
border-bottom: 1px solid ... |
.bl-1
|
border-left: 1px solid ... |
.br-1
|
border-right: 1px solid ... |
.bx-1
|
border-left: 1px solid ... border-right: 1px solid ... |
.by-1
|
border-top: 1px solid ... border-bottom: 1px solid ... |
.b-1
|
border: 1px solid ... |
<div class="b-1 h-30px"></div><br><div class="bx-2 h-30px"></div><br><div class="by-3 h-30px"></div><br><div class="bl-3 border-primary h-30px"></div><br><div class="br-2 border-purple h-30px"></div><br><div class="bt-1 border-danger h-30px"></div><br><div class="bb-1 border-info h-30px"></div><br>