How to Center the Content inside a Column in Bootstrap?
Last Updated :
02 May, 2024
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.
Using text-center class
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.
HTML
<!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
Using d-flex align-items-center justify-content-center
Using the d-flex, align-items-center and justify-content-center classes in Bootstrap to center content inside columns, aligning text, images, etc., both vertically and horizontally for enhanced visual presentation and readability with flexible alignment options.
Example: Below is the implementation of the above approach.
HTML
<!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">
bootstrap center column content
</h2>
<div class="row">
<div class="col bg-warning d-flex
align-items-center
justify-content-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
Share your thoughts in the comments
Please Login to comment...