Text
CSS classes to quickly style the text color, font-size and font-weight of an element.
Alignment
| Class | Styles |
|---|---|
| text-start | text-align: start; |
| text-center | text-align: center; |
| text-end | text-align: end; |
| text-justify | text-align: justify; |
Color
| Class | Styles | Notes |
|---|---|---|
| text-bg-surface | background-color: var(--background); color: var(--foreground); | |
| text-bg-surface-secondary | background-color: var(--background-secondary); color: var(--foreground-secondary); | |
| text-bg-surface-tertiary | background-color: var(--background-tertiary); color: var(--foreground-tertiary); | |
| text-subtle | color: var(--foreground-subtle); | |
| text-subtle-secondary | color: var(--foreground-subtle-secondary); | |
| text-subtle-tertiary | color: var(--foreground-subtle-tertiary); | |
| text-[color-name] | color: [color-value]; | See applying text colors for more details. |
| text-bg-[color-name] | color: [color-value]; | Valid color names are: default, primary, secondary, success, danger, warning, info, light and dark. |
Font Size
| Class | Styles |
|---|---|
| h1 | font-size: calc(1.375rem + 1.5vw); |
| h2 | font-size: calc(1.325rem + 0.9vw); |
| h3 | font-size: calc(1.3rem + 0.6vw); |
| h4 | font-size: calc(1.275rem + 0.3vw); |
| h5 | font-size: 1.25rem; |
Font Weight
| Class | Styles |
|---|---|
| font-weight-light | font-weight: 300; |
| font-weight-normal | font-weight: 400; |
| font-weight-medium | font-weight: 500; |
| font-weight-semibold | font-weight: 600; |
| font-weight-bold | font-weight: 700; |
| font-weight-bolder | font-weight: 900; |