PUBLISHED ON: AUGUST 10, 2021
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.
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.
