How to Center the Text in Bootstrap ?
Last Updated :
21 Feb, 2024
To center text in Bootstrap, you can use the class “text-center” on the parent element of the text you want to center. This class aligns the text horizontally in the center of its container, providing a simple and effective way to achieve centered text styling within Bootstrap layouts.
Using Utility Classes
In this approach, we use Bootstrap utility classes, specifically text-center, to center-align text elements within a container. The styles include a green-colored heading “GeeksforGeeks,” a subheading, and a paragraph describing it as a computer science portal.
Syntax:
<p class="text-center">Text</p>
Example: The below example uses Utility Classes to center text in Bootstrap.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Center a Text</title>
<link href=
rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="text-center text-success">
GeeksforGeeks
</h1>
<h3 class="text-center">
Using Utility Classes
</h3>
<p class="text-center">
A computer science portal for geeks
</p>
</div>
</body>
</html>
|
Output:
Using FlexBox Classes
In approach, we use Bootstrap’s Flexbox classes, including d-flex and justify-content-center, to create a flex container and center-align text elements. The styling features a green-colored heading “GeeksforGeeks,” a subheading, and a paragraph describing it as a computer science portal.
Syntax:
<div class="container d-flex justify-content-center">
<p>Text</p>
</div>
Example: The below example uses FlexBox Classes to center text in Bootstrap.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using FlexBox Approach</title>
<link href=
rel="stylesheet">
</head>
<body>
<div class="container d-flex justify-content-center">
<div>
<h1 class="text-success">GeeksforGeeks</h1>
<h3>Using FlexBox Classes</h3>
<p>A computer science portal for geeks</p>
</div>
</div>
</body>
</html>
|
Output:
Using Grid Classes
In this apprach, we use Bootstrap Grid classes, specifically using a combination of container, row, and col text-center, to center-align text elements within a column. The styling features a green-colored heading “GeeksforGeeks,” a subheading, and a paragraph describing it as a computer science portal.
Syntax:
<div class="container">
<div class="row">
<div class="col text-center">
<p>Text</p>
</div>
</div>
</div>
Example: The below example uses Grid Classes to center text in Bootstrap.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using Grid</title>
<link href=
rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col text-center">
<h1 class="text-success">GeeksforGeeks</h1>
<h3>Using Grid Classes</h3>
<p>A computer science portal for geeks</p>
</div>
</div>
</div>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...