Borders
The border set of utility classes allows you to create flexible borders on all 4 sides of an element. Borders on each side can be created independently, although the same color must be used for all sides.
Anytime you make a border, you must add the border class, along with any other options you choose to use.
Location and Size are defined together in a single class. Follows the format b[location]-[size].
-
b-[size]- provides a border around all sides -
by-[size]- provides a top and bottom border -
bx-[size]- provides a left and right border -
bt-[size]- provides a top border -
bb-[size]- provides a bottom border -
bl-[size]- provides a left border -
br-[size]- provides a right border
Location and Size are defined together in a single class. Follows the format b[location]-[size].
-
b[location]-sm- provides a 1px border at the chosen location(s) -
b[location]-md- provides a 3px border at the chosen location(s) -
b[location]-lg- provides a 5px border at the chosen location(s)
Color is assigned as a separate class, and is optional (borders will be black by default). Borders colors cannot be assigned on a per-location basis. Any colors in the editor color palette can be used. Follows the format b-[color-name].
-
b-primary- assigns Primary color to border(s) -
b-primary-support- assigns Primary Support color to border(s) - etc
Color names can be found by selecting any element that allows for color selection, and mousing over one of the color swatches to view its name.
-
border b-md- creates a 3px black border around all 4 sides of an element -
border by-lg b-primary- creates a 5px border on the top and bottom of an element using the Primary color -
border bl-lg bb-md b-secondary-support- creates a 5px border on the left and a 3px border on the bottom of an element using the Secondary Support color