# Text

Text utilities allow you to control the styling of text within an app.

## Color

In addition to the text color utilities included with the Bootstrap framework, we have included the `.text-black` utility to provide a true black text color when needed.

.text-primary
.text-secondary
.text-success
.text-danger
.text-info
.text-dark
.text-body
.text-muted
.text-black
.text-black-50
.text-warning
.text-light
.text-white
.text-white-50

## Link Color

Link color utilities are also available to specifically set the color of links.

Primary link
Secondary link
Success link
Danger link
Warning link
Info link
Light link
Dark link

## Alignmnet

You can easily set text alignment using the following utilities. Left and right alignmnet was discontinued in Bootstrap 5 in favor of the RTL-friendly start and finish classes. Responsive text alignment is also supported for each breakpoint.

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

Start aligned text on viewports sized SM or wider.

Start aligned text on viewports sized MD or wider.

Start aligned text on viewports sized LG or wider.

Start aligned text on viewports sized XL or wider.

Start aligned text on viewports sized XXL or wider.

## Wrapping

You can force or prevent text wrapping using the `.text-wrap` and `.text-nowrap` utility classes.

This text will wrap.
This text will overflow the parent.

## Word Break

The `.text-break` utility is available to use with content that will break past the width of the layout. Notice the very long word below breaks to new lines instead of overflowing the container.

Hippopotomonstrosesquippedaliophobia

## Transforms

Adjust the capitalization of text using text transfrom utilities.

THIS text will all be Lowercase.

THIS text will all be Uppercase.

THIS text will all be Capitalized.

## Font Size

Use font size utilities to change the size of text independently of the text element that is being used. These classes are named using the format `.fs-{number}` where number is a number 1 to 6.

These font size utilities follow use the same font size as the headings, referenced on the Typography page.

Font Size 1
Font Size 2
Font Size 3
Font Size 4
Font Size 5
Font Size 6
Small
Extra Small

## Font Weight & Style

Font weight and style utilities can be used to adjust the thickness and apperance text.

In Material Admin Pro, we have added an extended set of font weight utilities past what Bootstrap offers by default. These utilities are named using the format `.fw-{weight}` where weight is any font weight between 100 and 900.

In the below examples, only font weights 300 to 500 are shown since these are the only weights supported with this theme by default. Visit our theming documentation for more information on using different fonts and font weights.

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Font weight 300.

Font weight 400.

Font weight 500.

Italic text.

Text with normal font style

This is in monospace.

## Line Height

Line height utilities come in four variations which are used to manipulate the line height of text elements.

This is a paragraph with a line height of 1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus molestiae ut culpa cupiditate ea dolorum impedit beatae explicabo libero perspiciatis distinctio deleniti deserunt ex provident eos nesciunt, atque iste pariatur?

This is a paragraph with small line height. Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus molestiae ut culpa cupiditate ea dolorum impedit beatae explicabo libero perspiciatis distinctio deleniti deserunt ex provident eos nesciunt, atque iste pariatur?

This is a paragraph using the base line height. Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus molestiae ut culpa cupiditate ea dolorum impedit beatae explicabo libero perspiciatis distinctio deleniti deserunt ex provident eos nesciunt, atque iste pariatur?

This is a paragraph with large line height. Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus molestiae ut culpa cupiditate ea dolorum impedit beatae explicabo libero perspiciatis distinctio deleniti deserunt ex provident eos nesciunt, atque iste pariatur?

## Letter Spacing

The `.text-expanded` letter spacing utility is available to match Material Design's specification for their "body 1" style. It is best used on paragraphs that you want to have increase legibility with a slight increase in letter spacing.

This is an example of a paragraph with expanded type.

## Text Truncation

The `.text-truncate` helper allows for text within block or inline elements to truncate if the text surpasses the width of the element.

Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi.

### Related Links

Typography

Material Admin Pro's type system

Related Link arrow_upward
Bootstrap Text Utilities Documentation

Bootstrap's text utilities documentation

Related Link arrow_upward