Easily realign text to components with text alignment classes.
You can align text with the use of one of 4 classes
| Class | Alignment |
|---|---|
text-center |
Makes the text centered |
text-justify |
Makes the text justified |
text-left |
Makes the text aligned to the left |
text-right |
Makes the text aligned to the right |
Center aligned text
Justify aligned text
Left aligned text
Right aligned text
Center aligned text
Justify aligned text
Left aligned text
Right aligned text
Responsive variant include
.text-{value} for sm to xl..text-{breakpoint}-{value} for sm, md, lg,and xl.Where value is one of: center,justify,left and right
Wrap text with a .text-wrap class
This text should wrap.
Prevent long strings of text from breaking your components' layout by using .text-break to set word-wrap: break-word and word-break: break-word. We use word-wrap instead of the more common overflow-wrap for wider browser support, and add the deprecated word-break: break-word to avoid issues with flex containers.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
You can transform text with the use of one of 5 classes
| Class | Transformation |
|---|---|
text-capitalized |
Transforms the first character of each word to Uppercase |
text-lowercase |
Transforms all characters to lowercase |
text-uppercase |
Transforms all characters to UPPERCASE |
text-italic |
Transforms all characters to italic |
text-monospce |
Transforms all characters to monospace |
capitalized text.
LOWERCASE text.
uppercase text.
italic text.
monospace text.
capitalized text.
LOWERCASE text.
uppercase text.
italic text.
monospace text.
We have 6 font sizes to choose from:
.fs-1 text
.fs-2 text
.fs-3 text
.fs-4 text
.fs-5 text
.fs-6 text
.fs-1 text
.fs-2 text
.fs-3 text
.fs-4 text
.fs-5 text
.fs-6 text
You can transform the text weight with the use of one of 3 classes
| Class | Weight |
|---|---|
text-weight-light |
Transforms text weight to light |
text-weight-normal |
Transforms text weight to normal |
text-weight-bold |
Transforms text weight to bold |
.text-weight-light
.text-weight-normal
.text-weight-bold
.text-weight-light
.text-weight-normal
.text-weight-bold
Change the line height with .lh-* utilities.
This is a long paragraph written to show how the line-height of an element is affected by our utilities.
This is a long paragraph written to show how the line-height of an element is affected by our utilities.
This is a long paragraph written to show how the line-height of an element is affected by our utilities.
This is a long paragraph written to show how the line-height of an element is affected by our utilities.
This is a long paragraph written to show how the line-height of an element is affected by our utilities.
This is a long paragraph written to show how the line-height of an element is affected by our utilities.
This is a long paragraph written to show how the line-height of an element is affected by our utilities.
This is a long paragraph written to show how the line-height of an element is affected by our utilities.
Decorate text in components with text decoration classes.
This text has a line going through it.
This link has its text decoration removed
This text has a line going through it.
This link has its text decoration removed
This is a heading 1 tag
Designed and built with ♥ by Rume Aluya.