Bootstrap text alignment classes

Bootstrap 4 has built-in classes for dealing with text alignments as center, right and left along with text-weight (bold), wrapping, overflow, transform and italic text.

In this tutorial, I am going to show you live demos of aligning text center, right and left. I will also show you using float helper classes along with text alignment classes for images.

Bootstrap center text example

To make the text aligned center, use the .text-center class. In the following example, this class is applied in a paragraph and h1 to h6 headings to make text aligned centered:

See online demo and code

The markup:

The example of aligning text right

For aligning text right, use the .text-right class in the element. Like the above example, I have applied the .text-right class in a paragraph and h1 to h6 headings for the demo:

See online demo and code

The code for aligning right example

The example of using text-left class

Similarly, you may use the .text-left class for aligning the text towards the left. This is the default behavior applied in the text. For showing the difference, I have used paragraphs and headings with and without using the .text-left class.

Have a look at the output and code by visiting the demo page:

See online demo and code

The markup for using text-left class:

Dealing text alignment with viewports

If you want to keep text aligned center or right for large or small devices specifically as per viewports then use the text-align property as explained below with examples.

For making text aligned centered in large devices only, use the text-lg-center class. To test this, copy the code from the example page in your editor and run the code. Now, look at the screen size >=1200px and in small size to see how it changes its alignment:

See online demo and code

The code:

Align center in medium and large viewports only

For making text aligned centered in medium and large viewports only while left aligned in small viewports, use the .text-md-center class in elements like <p>, <h1>, <h2> etc.

Have a look at the usage and try it with various screen sizes:

See online demo and code

The code:

The text-sm-center class demo

For center alignment of text in all devices/viewports except the extra small (less than 576px) use the text-sm-center class. The demo code is shown below:

See online demo and code

The code to try:

Using text grid classes for right and left alignment

Similarly, Bootstrap 4 has built-in classes for aligning right or left (specifically) for various screens/viewports. The following classes are available:

For aligning right:

• text-sm-right
• text-md-right
• text-lg-right

For left alignment:

• text-sm-left
• text-md-left
• text-lg-left

Aligning image centrally by text-center class

Not only you may use the .text-center or other text classes for aligning texts but images as well. In the following example, two images are aligned right and center by using the Bootstrap 4 text alignment classes as follows:

See online demo and code

The markup for right and center aligned images by text classes:

Aligning images with float classes

You may also use helper float classes for aligning images to left or right. The following float classes are used in the example below:

• float-left
• float-right

See online demo and code

The example code:

See the output and get complete code from the demo page.