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 |
|
.img-rounded |
|
.img-thumbnail |
|
.img-sm |
|
.img-md |
|
.img-lg |
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 |