Border

ActivityMessagesFAQSupport

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 ...

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 5values. 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
<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>