Signup/Sign In

How to Align Text in Bootstrap?

We can easily align text within the components using Bootstrap. The text can be aligned to left, right, or center.

In this tutorial, we will be learning about the classes used to align the text in Bootstrap 5.

Text alignment classes

The text alignment classes are used to align the text in Bootstrap 5. This is the list of classes used to align text in bootstrap 5.

  • .text-start - This class is used to align the text to left.
  • .text-end - This class is used to align the text to right.
  • .text-center - This class is used to align the text to the center.

Example: Align text in Bootstrap 5

Here is an example to align text in bootstrap 5.

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Bootstrap Example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>	
</head>
<body>
    <h2> Text alignment class</h2>
    <div class="coontainer bg-light">
	   <p class="text-start">Left align the text</p>
	   <p class="text-center">Center align the text</p>
	   <p class="text-end">Right align the text</p>
    </div>
</body>
</html>

Output

Here is the output of the above program.

text alignment

Responsive text alignment

The above classes are used to align the text in all sizes of the viewport. But there are responsive classes that are used to align text to a particular viewport.

For example, .text-sm-center aligns the text to the center in a small viewport.

Example: Align text using responsive text-alignment

Here is an example to align text in a particular viewport.

Conclusion

In this tutorial, we have learned to align the text using text alignment classes in Bootstrap 5. If you are using Bootstrap 4 then use .text-left and .text-right instead of .text-start and .text-end respectively. We can also use responsive variations of text alignment.