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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
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:
Similar Reads
How to align pills to center in Bootstrap ? Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. If you are new to Bootstrap we highly recommend going through our Bootstrap 4 introduction.Pills are a kind of Bootstrap badge with more rounded corners. Pills by default will act as an inline-
2 min read
How to Get Centered Content in Bootstrap ? The task is to center content using bootstrap. The approach of this article is to get a Centered Content in Bootstrap by using a simple in-built class .text-center to center align all the inline elements like text, images, links, etc. under a block element i.e <div> or <p> element. Note:
1 min read
How to Align Text in Bootstrap Column ? In Bootstrap Framework, we can align the text within the columns using various utility classes. To align text within a Bootstrap column, use the built-in utility classes such as text-start, text-center, and text-end for the left, center, and right alignment, respectively. Simply apply the desired cl
3 min read
How to place table text into center using Bootstrap? Centering table text using Bootstrap involves aligning the content of table cells to the center horizontally, enhancing the presentation and readability of data. This is achieved by using Bootstrap’s built-in classes like text-center, which apply CSS styles for quick and responsive text alignment wi
2 min read
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 U
2 min read