WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

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:

<!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:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties