Text Alignment

Easily realign text to components with text alignment classes.

You can align text with the use of one of 4 classes

Class	Alignment
text-is-center	Makes the text centered
text-is-justify	Makes the text justified
text-is-left	Makes the text aligned to the left
text-is-right	Makes the text aligned to the right

Center aligned text 
Justify aligned text
Left aligned text
Right aligned text

Text wrapping and overflow

Wrap text with a .text-wrap class

Word Break

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.

This text should wrap.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

Text transformation

You can transform text with the use of one of 5 classes

Class	Transformation
text-is-capitalized	Transforms the first character of each word to Uppercase
text-is-lowercase	Transforms all characters to lowercase
text-is-uppercase	Transforms all characters to UPPERCASE
font-style-italic	Transforms all characters to italic
text-is-underlined	Underlines the text

capitalized text.
LOWERCASE text.
uppercase text.

Font Size

We have 7 font sizes to choose from:

Class	Font-size
fs-1	2.9rem
fs-2	2.6rem
fs-3	2rem
fs-4	1.4rem
fs-5	1.25rem
fs-6	1rem
fs-7	0.75rem

.fs-1 text
.fs-2 text
.fs-3 text
.fs-4 text
.fs-5 text
.fs-6 text
.fs-7 text

Text Weight

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
.font-style-italic

Line Height

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.

Text decoration

Decorate text in components with text decoration classes.

This text has a line underneath it.
This text has a line going through it.
This link has its text decoration removed