How to align text in the center of div in bootstrap?
April 17, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
Today, I am going to show you. How to align text in the center of div in bootstrap with code example.
Here, we will use .text-center class to make a text in center.
You can align the text to the center by simply adding alignment class to the parent div. See the examples.
Basic example
Add class <code>.text-center</code> to the parent div to align <strong>any item</strong> inside to the center.
Example:
Let’s look at the following example to understand how it basically works:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Bootstrap</title>
</head>
<body>
<div class="container my-4">
<div class="border border-light p-3 mb-4">
<div class="text-center">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>Check the output of the above code example.
In the above code, we have used .text-center class to of align a form in center in bootstrap.
All the best 👍
