Borders

Border sizes

Use the border classes to custom the border of any element. They are working with the base size of a 1px, $bd-base-width: 1px used for every variant.
You can custom the $bd-base-width variable by downloading the source files.
All you have to specify is the class .bd-{space-number} where the space number can be :

Space number Real space
0 0px
1 1px
2 1.5px
3 2px
4 4px
5 6px

Border styles

The borders classes allow you to modify the border appearance.
The classes are .bd-{borderStyle} where borderStyle can be :
dashed | dotted | double | groove | hidden | none | inset | outset | ridge | solid | revert

Examples :

Card
This is an example card with solid borders
Card
This is an example card with dotted borders

Borders on specific sides

You can specify the style for each border of an element. To make it, use the following classes :

Description Class name Possible values
Top border .bd-t-{value} 0 | 1 | ... | 5 and solid | dotted | ...
Right border .bd-r-{value} 0 | 1 | ... | 5 and solid | dotted | ...
Bottom border .bd-b-{value} 0 | 1 | ... | 5 and solid | dotted | ...
Left border .bd-l-{value} 0 | 1 | ... | 5 and solid | dotted | ...
Left and right borders .bd-x-{value} 0 | 1 | ... | 5 and solid | dotted | ...
Top and bottom borders .bd-y-{value} 0 | 1 | ... | 5 and solid | dotted | ...

You can apply the border style classes on specific sides too.

Card
This is an example card with specific borders
Card
This is an example card with specific borders
Card
This is an example card with specific borders