Contextual colors
Class name Example
.text-muted Example text
.text-primary Example text
.text-success Example text
.text-info Example text
.text-warning Example text
.text-danger Example text
Border radius
Class name Example
.b-r-xs
Example text
.b-r-sm
Example text
.b-r-md
Example text
.b-r-lg
Example text
.b-r-xl
Example text
Hr Line
Class name Example
Standard <hr>
.hr-line-dashed
.hr-line-solid
Paddings
Class name Example
.p-xxs
Example text
.p-xs
Example text
.p-sm
Example text
.p-md
Example text
.p-lg
Example text
.p-xl
Example text
.no-paddings
remove all paddings
Example text
.p-w-(xs,sm,md,lg,xl)
padding width
Example text
.p-h-(xs,sm,md,lg,xl)
height width
Example text
Borders
Class name Example
.border-left
Example text
.border-right
Example text
.border-top
Example text
.border-bottom
Example text
.no-borders
remove all borders
Example text
.border-left-right
Example text
.border-top-bottom
Example text
.border-size-(sm,md,lg,xl)
Example text
Width, height
Class name Description
.h-150 min-height: 150px;
.h-200 min-height: 200px;
.h-300 min-height: 300px;
.w-150 min-width: 150px;
.w-200 min-width: 200px;
.w-300 min-width: 300px;
Contextual backgrounds
Class name Example
.bg-muted
Example text
.bg-primary
Example text
.bg-success
Example text
.bg-info
Example text
.bg-warning
Example text
.bg-danger
Example text
Images
Class name Example
.img-circle image
.img-rounded image
.img-thumbnail image
.img-sm image
.img-md image
.img-lg image
Basic font width
Class name Description
.font-normal Example text
.font-bold Example text
.font-italic Example text
.text-uppercase Example text
.text-lowercase Example text
.text-capitalize Example text
Margins
Class name Example
.m-xxs
Example text
.m-xs
Example text
.m-sm
Example text
.m-md
Example text
.m-lg
Example text
.m-xl
Example text
.m-n
Example text
.m-l / m-l-(xs,sm,md,lg,xl)
margin left
Example text
.m-l-n / m-l-n-(xs,sm,md,lg,xl)
margin left negative
Example text
.m-l-none
clear margin left
Example text
.m-t / m-t-(xs,sm,md,lg,xl)
margin top
Example text
.m-t-n / m-t-n-(xs,sm,md,lg,xl)
margin top negative
Example text
.m-t-none
clear margin top
Example text
.m-r / m-r-(xs,sm,md,lg,xl)
margin right
Example text
.m-r-n / m-r-n-(xs,sm,md,lg,xl)
margin right negative
Example text
.m-r-none
clear margin right
Example text
.m-b / m-b-(xs,sm,md,lg,xl)
margin bottom
Example text
.m-b-n / m-b-n-(xs,sm,md,lg,xl)
margin bottom negative
Example text
.m-b-none
clear margin bottom
Example text
.no-margins
remove all margins
Example text
Padding
p-1

p-2

p-3

p-4

p-5

Margin
m-1

m-2

m-3

m-4

m-5

Sides Padding
pt-3

pr-3

pb-3

pl-3

px-3

py-3

p-3

Margin
mt-3

mr-3

mb-3

ml-3

mx-3

my-3

m-3

Breakpoint
p-1

p-sm-1

p-md-2

p-lg-3

p-xl-4

Add padding to md breakpoint only
p-md-4

Size

The values for each level of spacing are a calculation of the base font size which is 16px or 1rem. Below are the pixel equivelants for each numeric spacing value.

0 1 2 3 4 5
0px 4px 8px 16px 24px 48px