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:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<p class="text-center">The text-center class for aligning text centrally in paragraph!</p> <h1 class="text-center">Center text in heading 1!</h1> <h2 class="text-center">Center text in heading 2!</h2> <h3 class="text-center">Center text in heading 3!</h3> <h4 class="text-center">Center text in heading 4!</h4> <h5 class="text-center">Center text in heading 5!</h5> <h6 class="text-center">Center text in heading 6!</h6> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<p class="text-right">Align right by text-right class in a paragraph</p> <h1 class="text-right">Align right in h1!</h1> <h2 class="text-right">Align right in h2!</h2> <h3 class="text-right">Align right in h1!</h3> <h4 class="text-right">Align right in h1!</h4> <h5 class="text-right">Align right in h1!</h5> <h6 class="text-right">Align right in h1!</h6> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<p class="text-left">Align left by text-left class in a paragraph</p> <h1 class="text-left">Align left in h1!</h1> <h2 class="text-left">Align left in h2!</h2> <h3 class="text-left">Align left in h1!</h3> <h4 class="text-left">Align left in h1!</h4> <h5 class="text-left">Align left in h1!</h5> <h6 class="text-left">Align left in h1!</h6> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="container"> <h3>Demo of Text Alignment in Bootstrap 4</h3> <p class="text-lg-center">Aligned center in large viewport and left in small viewports</p> <h1 class="text-lg-center">h1: centered in large screen and left in med/smaller</h1> <h4 class="text-lg-center">h4: centered in large screen and centered in med/smaller</h4> <h5 class="text-lg-center">h5: centered in large screen and centered in med/smaller</h5> <h6 class="text-lg-center">h6: centered in large screen and centered in med/smaller</h6> </div> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="container"> <h3>Demo of text-md-center class</h3> <p class="text-md-center">Aligned center in medium/large viewports and left in small viewports</p> <h1 class="text-md-center">h1: centered in medium/large screen and left in smaller</h1> <h4 class="text-md-center">h4: centered in medium/large screen and centered in smaller</h4> <h5 class="text-md-center">h5: centered in medium/large screen and centered in smaller</h5> <h6 class="text-md-center">h6: centered in medium/large screen and centered in smaller</h6> </div> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="container"> <h3>Demo of text-sm-center class</h3> <p class="text-sm-center">Align center in small/medium/large viewports except extra small</p> <h1 class="text-sm-center">h1: centered in small/medium/large except extra small</h1> <h4 class="text-sm-center">h4: centered in small/medium/large except extra small</h4> <h5 class="text-sm-center">h5: centered in small/medium/large except extra small</h5> <h6 class="text-sm-center">h6: centered in small/medium/large except extra small</h6> </div> |
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:
1 2 3 4 5 6 7 8 9 10 11 |
<div class="text-center"> <img src="images/donut.png" class="img-thumbnail" alt="Center aligned image"> </div> <div class="text-right"> <img src="images/donut.png" class="img-thumbnail" alt="Right aligned image"> </div> |
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:
1 2 3 4 5 6 7 8 9 10 11 |
<div class="container"> <h3>Aligning images example</h3> <img src="images/donut.png" class="img-fluid float-left" alt="Left aligned"> <img src="images/donut.png" class="img-fluid float-right" alt="Right aligned"> </div> |
See the output and get complete code from the demo page.