Display
Controls the display mode of an element with the display CSS property.
|
CSS value |
All breakpoints |
Tablet and larger |
Desktop and larger |
|---|---|---|---|
|
block |
d-block |
d-tablet-block |
d-desktop-block |
|
flex |
d-flex |
d-tablet-flex |
d-desktop-flex |
|
inline |
d-inline |
d-tablet-inline |
d-desktop-inline |
|
inline-block |
d-inline-block |
d-tablet-inline-block |
d-desktop-inline-block |
|
inline-flex |
d-inline-flex |
d-tablet-inline-flex |
d-desktop-inline-flex |
|
none |
d-none |
d-tablet-none |
d-desktop-none |
Margin
Controls outer spacing of an element using margin-* CSS properties.
|
CSS property |
All breakpoints |
Tablet and larger |
Desktop and larger |
|---|---|---|---|
|
margin-top |
mt-<0–1700> mt-auto |
mt-tablet-<0–1700> mt-tablet-auto |
mt-desktop-<0–1700> mt-desktop-auto |
|
margin-right |
mr-<0–1700> mr-auto |
mr-tablet-<0–1700> ml-tablet-auto |
mr-desktop-<0–1700> mr-desktop-auto |
|
margin-bottom |
mb-<0–1700> mb-auto |
mb-tablet-<0–1700> mb-tablet-auto |
mb-desktop-<0–1700> mb-desktop-auto |
|
margin-left |
ml-<0–1700> ml-auto |
ml-tablet-<0–1700> ml-tablet-auto |
ml-desktop-<0–1700> ml-desktop-auto |
|
margin-inline |
mx-<0–1700> mx-auto |
mx-tablet-<0–1700> mx-tablet-auto |
mx-desktop-<0–1700> mx-desktop-auto |
|
margin-block |
my-<0–1700> my-auto |
my-tablet-<0–1700> my-tablet-auto |
my-desktop-<0–1700> my-desktop-auto |
Padding
Controls inner spacing of an element using padding-* CSS properties.
|
CSS property |
All breakpoints |
Tablet and larger |
Desktop and larger |
|---|---|---|---|
|
padding-top |
pt-<0–1700> |
pt-tablet-<0–1700> |
pt-desktop-<0–1700> |
|
padding-right |
pr-<0–1700> |
pr-tablet-<0–1700> |
pr-desktop-<0–1700> |
|
padding-bottom |
pb-<0–1700> |
pb-tablet-<0–1700> |
pb-desktop-<0–1700> |
|
padding-left |
pl-<0–1700> |
pl-tablet-<0–1700> |
pl-desktop-<0–1700> |
|
padding-inline |
px-<0–1700> |
px-tablet-<0–1700> |
px-desktop-<0–1700> |
|
padding-block |
py-<0–1700> |
py-tablet-<0–1700> |
py-desktop-<0–1700> |
Text Align
Controls text alignment of an element using the text-align CSS property.
|
CSS value |
All breakpoints |
Tablet and larger |
Desktop and larger |
|---|---|---|---|
|
left |
text-left |
text-tablet-left |
text-desktop-left |
|
right |
text-right |
text-tablet-right |
text-desktop-right |
|
center |
text-center |
text-tablet-center |
text-desktop-center |
Text Color
Controls text color of an element using the color CSS property.
|
Text color |
All breakpoints |
|---|---|
|
primary |
text-primary |
|
secondary |
text-secondary |
|
tertiary |
text-tertiary |
Border Radius
Controls border radius of an element using the border-radius CSS property.
|
Border radius |
All breakpoints |
|---|---|
|
radius-0 |
rounded-0 |
|
radius-100 |
rounded-100 |
|
radius-200 |
rounded-200 |
|
radius-300 |
rounded-300 |
|
radius-400 |
rounded-400 |
|
radius-500 |
rounded-500 |
|
radius-full |
rounded-full |
Background Color
Controls background color of an element using the background-color CSS property.
|
Background color |
All breakpoints |
|---|---|
|
primary |
bg-primary |
|
secondary |
bg-secondary |
|
tertiary |
bg-tertiary |