CSS Utilities

Text

.text-center

.text-left

.text-right

TEXT IN LOWERCASE use .text-lowercase

text in uppercase use .text-uppercase

text-wrap. Bacon ipsum dolor amet fatback brisket ground round, ball tip pig shoulder capicola tenderloin pork chop rump beef. Pork chop bacon jowl spare ribs, kevin short loin rump beef ribs. T-bone biltong tri-tip, venison buffalo doner swine boudin pastrami chicken tenderloin pork belly jerky spare ribs meatloaf. Cow spare ribs tongue turkey shankle pork chop. Meatloaf shank drumstick pork belly alcatra.

Display

I'm a flex (.d-flex) container!

.d-block .d-block
.d-i-block .d-i-block

This is some text. This is an inline (.d-inline) element. This is some more text.

Float

Float left, use .f-left

Float right, use .f-right

Float none, use .f-none

Flexbox

Align Items Center (.align-items-center)

Item 1
Item 2
Item 3

Justify Content Center (.justify-content-center)

Item 1
Item 2
Item 3

Flex Center (.flex-center)

Item 1
Item 2
Item 3

Spacing

The padding and margin utilities provide classes for adding padding and margin to elements in increments of 0, up to a maximum of 80 pixels.

(.m-bottom-12) Margin bottom 12px with (.p-bottom-12) padding bottom 12px

Margin bottom 16px with 32px padding top

.p-padding-16 .p-left-32 .m-bottom-16 .p-top-44 .p-bottom-64 .p-right-28

.m-bottom-20 .m-top-28 .p-top-44 .p-bottom-60

.m-bottom-20 .m-top-40 .p-top-20 .p-bottom-20 .p-left-40