How to use text-center class In Bootstrap
Utilize the text-center class to center content inside a Bootstrap column, ensuring horizontal alignment for enhanced visual presentation and readability. Ideal for inline elements, it simplifies the process of achieving centered layout.
Example: Below is the implementation of the above approach.
<!DOCTYPE html>
<html>
<head>
<title>
Bootstrap Aligning Text
</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<h2 class="text-center">
Centering content inside a Bootstrap column
</h2>
<div class="row">
<div class="col bg-warning
text-center ">
<span>
I am Aligned Center
</span>
</div>
<div class="col bg-success
text-light">
Not Aligned Center
</div>
</div>
</div>
</body>
</html>
Output:
bootstrap center column content Example Output
How to Center the Content inside a Column in Bootstrap?
Centering content inside a Bootstrap column involves aligning text, images, etc., horizontally for improved visual presentation and readability. Use text-center for inline elements or mx-auto for block elements, and Use d-flex property to ensure proper alignment and visual appeal.
Table of Content
- Using text-center class
- Using d-flex align-items-center justify-content-center