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`
Right border	`.bd-r-{value}`	`0 \| 1 \| ... \| 5`
Bottom border	`.bd-b-{value}`	`0 \| 1 \| ... \| 5`
Left border	`.bd-l-{value}`	`0 \| 1 \| ... \| 5`

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