Bootstrap text-align provides helpful classes to make alignment of the content. While writing a text content on your website, you always think of aligning the content to some position. The alignment of the text content can be done by writing CSS text-align for the required element.

However, bootstrap solves this problem of writing CSS for the element by providing a single class to add to the element. In addition to this, you can align left, right, center as well as justify by using the bootstrap classes.

Below are the classes with the example to check the alignment.

Bootstrap Text Align Classes

There is five bootstrap text align classes given below to make alignment of the text content.

Text align Classes Description
.text-left Align your text content to the left position using this class.
.text-right Right align the text content position using this class
.text-centre If you want to make text align to the center position, you can use this class.
.text-justify Justify align the text content using this class.
.text-nowrap The text will never wrap to the next line until you use the <br> tag.

Bootstrap Text Align Left

If you want to left align the text content using bootstrap, you can use bootstrap text align left class .text-left. You have to just add the class to the HTML element you to make left align.

See the example below to left align the text content using bootstrap.

Output

This is the paragraph to show left align text.

Bootstrap Text Align Right

Bootstrap provides a class .text-right to right align the text content. You have to just add this class to right align the HTML content.

See the example below to right align the text content using bootstrap.

Output

This is the paragraph to show the right aligned text.

Bootstrap Text Align Center

To make text center aligned using bootstrap, you can use class .text-center.

See the example below to center align the text content using bootstrap.

Output

This is the paragraph to show the center aligned text.

Bootstrap Text Align Justify

If you want to make text justify aligned using bootstrap, you have to use bootstrap class .text-justify. Add this class to any HTML element to make it justify aligned.

See the example below to justify align the text content using bootstrap.

Output

This is the paragraph to show the alignment of the text content. You can align to all the available position by adding a single class of bootstrap. It also provides the wrap property of CSS with just one single class.

Bootstrap Text Nowrap

Bootstrap also provides a class .text-nowrap to make white space property no wrap until you use the <br> tag.

See the example below to make use the nowrap class of bootstrap.

Output

This is the paragraph to show the text nowrap alignment.

Reference
Getboostrap v3 alignment
Getboostrap v4 alignment

Leave a Reply

Your email address will not be published. Required fields are marked *