Border classes
<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>
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 3
values. Also, {side}
is one of:
t
: Border topb
: Border bottoml
: Border leftr
: Border rightx
: Border left and righty
: 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 ... |
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 ...
border-right: 1px solid ...
.by-1
border-top: 1px solid ...
border-bottom: 1px solid ...
border-bottom: 1px solid ...
.b-1
border: 1px solid ...
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
, 3
, 4
, or 5
values. Also, {side}
is one of:
t
: Border topb
: Border bottoml
: Border leftr
: Border rightx
: Border left and righty
: Border top and bottom- null: All sides
<div class="b-dashed"></div>
<div class="b-dotted"></div>
<div class="b-double"></div>
<div class="b-groove"></div>
<div class="b-solid"></div>
<div class="b-1"></div>
<div class="bx-2"></div>
<div class="by-3"></div>
<div class="bl-3 border-primary"></div>
<div class="br-2 border-success"></div>
<div class="bt-1 border-danger"></div>
<div class="bb-1 border-info"></div>