Borders
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
Borders on BootstrapBorder
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 forborder-top
-
bottom
- for classes that set style forborder-bottom
-
left
- for classes that set style forborder-left
-
right
- for classes that set style formargin-right
-
x
- for classes that set both*-left
and*-right
-
y
- for classes that set both*-top
and*-bottom
-
blank - for classes that set the
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.
Additive
<span class="border"></span>
<span class="border-top"></span>
<span class="borderright"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
Subtractive
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
Border Color
Change the border color using utilities built on our theme colors
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
Border Radius
Add classes to an element to easily round its corners.
<span class="rounded-0"></span>
<span class="rounded"></span>
<span class="rounded-soft"></span>
<span class="rounded-circle"></span>
Border Style
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
,
xl
and xxl
.
Where side is same as documented before.
<span class="border-dashed"></span>
<span class="border-dashed-top"></span>
<span class="border-dashed-right"></span>
<span class="border-dashed-bottom"></span>
<span class="border-dashed-left"></span>
Border color and width
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}
and for
width border-2x
.
Where color is one of: primary
,
secondary
, success
,
info
, warning
,
danger
, light
, dark
,
black
, 1100
, 1000
,
900
, 800
, 700
,
600
, 500
, 400
,
300
, 200
, 100
,
white
,
<span class="border border-info"></span>
<span class="border border-success"></span>
<span class="border border-warning"></span>
<span class="border border-danger"></span>
<span class="border border-stunning"></span>
<span class="border border-cake"></span>
<span class="border border-facebook"></span>
<span class="border border-twitter"></span>
<span class="border border-google-plus"></span>
<span class="border border-github"></span>
<div class="w-100"></div>
<span class="border border-black"></span>
<span class="border border-dark"></span>
<span class="border border-1100"></span>
<span class="border border-1000"></span>
<span class="border border-900"></span>
<span class="border border-800"></span>
<span class="border border-700"></span>
<span class="border border-600"></span>
<span class="border border-500"></span>
<span class="border border-400"></span>
<span class="border border-300"></span>
<span class="border border-200"></span>
<span class="border border-100"></span>
<span class="border border-light"></span>
<span class="border border-white"></span>
<span class="border border-2x"></span>