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–1200> mt-auto |
mt-tablet-<0–1200> mt-tablet-auto |
mt-desktop-<0–1200> mt-desktop-auto |
|
margin-right |
mr-<0–1200> mr-auto |
mr-tablet-<0–1200> ml-tablet-auto |
mr-desktop-<0–1200> mr-desktop-auto |
|
margin-bottom |
mb-<0–1200> mb-auto |
mb-tablet-<0–1200> mb-tablet-auto |
mb-desktop-<0–1200> mb-desktop-auto |
|
margin-left |
ml-<0–1200> ml-auto |
ml-tablet-<0–1200> ml-tablet-auto |
ml-desktop-<0–1200> ml-desktop-auto |
|
margin-inline |
mx-<0–1200> mx-auto |
mx-tablet-<0–1200> mx-tablet-auto |
mx-desktop-<0–1200> mx-desktop-auto |
|
margin-block |
my-<0–1200> my-auto |
my-tablet-<0–1200> my-tablet-auto |
my-desktop-<0–1200> 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–1200> |
pt-tablet-<0–1200> |
pt-desktop-<0–1200> |
|
padding-right |
pr-<0–1200> |
pr-tablet-<0–1200> |
pr-desktop-<0–1200> |
|
padding-bottom |
pb-<0–1200> |
pb-tablet-<0–1200> |
pb-desktop-<0–1200> |
|
padding-left |
pl-<0–1200> |
pl-tablet-<0–1200> |
pl-desktop-<0–1200> |
|
padding-inline |
px-<0–1200> |
px-tablet-<0–1200> |
px-desktop-<0–1200> |
|
padding-block |
py-<0–1200> |
py-tablet-<0–1200> |
py-desktop-<0–1200> |
Text Align
Controls text alignment of an element using the text-align CSS property.
|
CSS value |
All breakpoints |
|---|---|
|
left |
text-left |
|
right |
text-right |
|
center |
text-center |
Text Color
Controls text color of an element using the color CSS property.
|
Text color |
All breakpoints |
|---|---|
|
primary-default |
text-primary |
|
primary-disabled |
text-primary-disabled |
|
primary-inverted-default |
text-primary-inverted |
|
primary-inverted-disabled |
text-primary-inverted-disabled |
|
secondary-default |
text-secondary |
|
secondary-disabled |
text-secondary-disabled |
|
secondary-inverted-default |
text-secondary-inverted |
|
secondary-inverted-disabled |
text-secondary-inverted-disabled |
|
brand-primary |
text-brand-primary |
|
brand-secondary |
text-brand-secondary |
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 |
Background Color
Controls background color of an element using the background-color CSS property.
|
Background color |
All breakpoints |
|---|---|
|
basic |
bg-basic |
|
cover |
bg-cover |
|
inverted |
bg-inverted |
|
brand-primary |
bg-brand-primary |
|
brand-secondary |
bg-brand-secondary |