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
