How to Get Centered Content in Bootstrap
Topic: Bootstrap / SassPrev|Next
Answer: Use the text-center
Class
You can simply use the Bootstrap's built-in class .text-center
to center align all the inline elements like text, images, links, etc. within a block element such as a <div>
or <p>
element.
This solution will work in both Bootstrap 3 and 4 versions. Here's an example:
Example
Try this code »-<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Text Centering 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>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1>This is a heading</h1>
<p>This is simple paragraph of text.</p>
</div>
</div>
</div>
</body>
</html>
Related FAQ
Here are some more FAQ related to this topic: