Alignment

Alignment classes allow you to quickly and easily center elements, set their sizing, and control their margin or padding. Each alignment item has multiple different sizes (1, 2, 3, and 4) that can be applied to each class. Each respective size adds .5em to each attribute being modified. For example, .mr-1 sets .5em on the right margin, and .mr-3 sets 1.5em on the right margin.

Margin Controls

Class

Function

.mx-a

sets left and right margins to auto

.mb-X

sets bottom margin

.mt-X

sets top margin

.ml-X

sets left margin

.mr-X

sets right margin

.mx-X

sets left and right margins

.my-X

sets top and bottom margins

.m0

Removes all margin from the element

Padding Controls

Class

Function

.pb-X

sets bottom padding

.pt-X

sets top padding

.pl-X

sets left padding

.pr-X

sets right padding

.px-X

sets left and right paddings

.py-X

sets top and bottom paddings

.p0

removes all padding from the element