Advertisements
How to Align Text in Bootstrap
Topic: Bootstrap / SassPrev|Next
Answer: Use the Text-align Classes
Bootstrap framework has several built-in CSS classes that you can use to align text to the left, right, center inside a heading, paragraph, table, div elements and so on.
Let's try out the following example to understand how this basically works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Text-align Classes in Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<p class="text-left">This text is left aligned.</p>
<p class="text-center">This text is center aligned.</p>
<p class="text-right">This text is right aligned.</p>
<p class="text-justify">This text is justified.</p>
</body>
</html>The text alignment classes in the above example are supported in both Bootstrap 3 and 4 versions.
Related FAQ
Here are some more FAQ related to this topic:
- How to left and right align text within a DIV in Bootstrap
- How to align Bootstrap modal vertically center
- How to center a column in Bootstrap
Advertisements
