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.

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 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.