Use shorthand border utility classes to control border, border width and border color on elements.
Border utility classes can be defined using the format -b{sides}[-{breakpoint}]--{size}
.
t
- use to apply border-top
b
- use to apply border-bottom
l
- use to apply border-left
r
- use to apply border-right
x
- use to apply border-left
and border-right
y
- use to apply border-top
and border-bottom
border
to all 4 sides.Optionally include -{breakpoint} to apply the utility behaviour to some breakpoints. As a mobile first library, any applying to smaller breakpoint will modify also larger ones unless other class overrides this behaviour.
border
to all breakpoints.sm
- use to apply border
to sm and larger breakpoints.md
- use to apply border
to ms and larger breakpoints.lg
- use to apply border
to lg and larger breakpoints.xl
- use to apply border
to xl breakpoints.0
- use to eliminate existing border
and set to 0
1
- use to set border
to 1px
2
- use to set border
to 2px
3
- use to set border
to 3px
4
- use to set border
to 4px
Apply borders to specific sides of an element by adding t
,
b
, l
, r
, x
or y
to the class name.
<div class="-bt--1"></div>
<div class="-br--1"></div>
<div class="-bb--1"></div>
<div class="-bl--1"></div>
<div class="-bx--1"></div>
<div class="-by--1"></div>
Target specific breakpoints with reponsive classes.
<div class="-bx--0 -by--4 -bx-lg--4 -by-lg--0"></div>
<div class="-b--0 -b-sm--1 -b-md--2 -b-lg--3 -b-xl--4"></div>
Control an elements border size by adjusting the size from 0
- 4
.
<div class="-b--0"></div>
<div class="-b--1"></div>
<div class="-b--2"></div>
<div class="-b--3"></div>
<div class="-b--4"></div>
Use contextual color classes to change a borders color.
<div class="-b--1"></div>
<div class="-b--1 -b--primary"></div>
<div class="-b--1 -b--success"></div>
<div class="-b--1 -b--danger"></div>
<div class="-b--1 -b--warning"></div>
<div class="-b--1 -b--dark"></div>
<div class="-b--1 -b--light"></div>
Breakpoint classes also work here. The format is -b[-{breakpoint}]--{color}
.
<div class="-b--1 -b--primary -b-sm--dark -b-md--danger -b-lg--success -b-xl--warning"></div>