These modular elements can be readily used and customized in every layout across pages.
The classes are named using the format border-{side}
for xs
and border-{breakpoint}-{side}
for sm
, md
, lg
, and xl
.
Where side is one of:
top
- for classes that set style for border-top
bottom
- for classes that set style for border-bottom
left
- for classes that set style for border-left
right
- for classes that set style for margin-right
x
- for classes that set both *-left
and *-right
y
- for classes that set both *-top
and *-bottom
border
style on all 4 side of the element.Use border utilities to quickly style the border
of an element. Great for images, buttons, or any other element.
Examples for adding borders
<span class="border"></span>
<span class="border-top border-md-left"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
For removing border, the classes are named using the format border-{side}-0
for xs
and border-{breakpoint}-{side}-0
for sm
, md
, lg
, and xl
.
Where side is same as documented before.
Examples for removing borders
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-lg-left-0"></span>
For the dashed border, the classes are named using the format, border-dashed-{side}
for xs
and border-{breakpoint}-dashed-{side}
for sm
, md
, lg
, and xl
.
Where side is same as documented before.
Examples for dashed borders
<span class="border-dashed"></span>
<span class="border-dashed-top"></span>
<span class="border-sm-dashed-right"></span>
<span class="border-dashed-bottom"></span>
<span class="border-dashed-left"></span>
Border color set as currentColor
and border width 1px
. Modifier can be used to change border color and width. The modifier classes for color are named using the format border-color-{color}
and for width border-2x
.
Where color is one of: black
, 1
, 2
, 3
, 4
, 5
, 6
, 7
, 8
, 9
, 10
, 11
, white
, primary
, info
, success
, warning
, danger
, stunning
, cake
, facebook
, twitter
, google-plus
, github
.
Examples for adding border colors and width
<span class="border border-color-black"></span>
<span class="border border-color-1"></span>
<span class="border border-color-2"></span>
<span class="border border-color-3"></span>
<span class="border border-color-4"></span>
<span class="border border-color-5"></span>
<span class="border border-color-6"></span>
<span class="border border-color-7"></span>
<span class="border border-color-8"></span>
<span class="border border-color-9"></span>
<span class="border border-color-10"></span>
<span class="border border-color-11"></span>
<span class="border border-color-white"></span>
<span class="border border-color-primary"></span>
<span class="border border-color-info"></span>
<span class="border border-color-success"></span>
<span class="border border-color-warning"></span>
<span class="border border-color-danger"></span>
<span class="border border-color-stunning"></span>
<span class="border border-color-cake"></span>
<span class="border border-color-facebook"></span>
<span class="border border-color-twitter"></span>
<span class="border border-color-google-plus"></span>
<span class="border border-color-github"></span>
<span class="border border-2x"></span>
The classes are named using the format radius-{size}
for xs
and radius-{breakpoint}-{corner}-{size}
for sm
, md
, lg
, and xl
.
Where corner is one of:
tr
- for classes that set radius-top-right
tl
- for classes that set radius-top-left
br
- for classes that set radius-bottom-right
bl
- for classes that set radius-bottom-left
radius
on all 4 corners of the elementWhere size is one of: 0
, primary
, secondary
, capsule
, round
.
<span class="radius-0"></span>
<span class="radius-primary radius-lg-tl-round"></span>
<span class="radius-secondary"></span>
<span class="radius-capsule"></span>
<span class="radius-round"></span>