Border
Notation
Border utility classes can be defined using the format -b{sides}[-{breakpoint}]--{size}
.
{sides}
t
- use to applyborder-top
b
- use to applyborder-bottom
l
- use to applyborder-left
r
- use to applyborder-right
x
- use to applyborder-left
andborder-right
y
- use to applyborder-top
andborder-bottom
- blank - leave blank to apply
border
to all 4 sides.
{breakpoint}
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.
- blank - leave blank to apply
border
to all breakpoints. sm
- use to applyborder
to sm and larger breakpoints.md
- use to applyborder
to ms and larger breakpoints.lg
- use to applyborder
to lg and larger breakpoints.xl
- use to applyborder
to xl breakpoints.
{size}
0
- use to eliminate existingborder
and set to0
1
- use to setborder
to1px
2
- use to setborder
to2px
3
- use to setborder
to3px
4
- use to setborder
to4px
Examples
Border Sides
Apply borders to specific sides of an element by adding t
,
b
, l
, r
, x
or y
to the class name.
-bt--1
-br--1
-bb--1
-bl--1
-bx--1
-by--1
<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>
Breakpoints
Target specific breakpoints with responsive classes.
-bx--0 -by--4
-bx-lg--4 -by-lg--0
-bx-lg--4 -by-lg--0
-b--0 -b-sm--1
-b-md--2 -b-lg--3
-b-xl--4
-b-md--2 -b-lg--3
-b-xl--4
<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>
Border Sizes
Control an elements border size by adjusting the size from 0
- 4
.
-b--0
-b--1
-b--2
-b--3
-b--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>
Border Colors
Use contextual color classes to change a borders color.
Base
-b--primary
-b--success
-b--danger
-b--warning
-b--dark
-b--light
<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}
.
-b--primary -b-sm--dark -b-md--danger -b-lg--info -b-xl--warning
<div class="-b--1 -b--primary -b-sm--dark -b-md--danger -b-lg--success -b-xl--warning"></div>