How to Center the Text in Bootstrap ?
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.
Table of Content
- Using Utility Classes
- Using FlexBox Classes
- Using Grid Classes
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 “w3wiki,” 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/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet" > </ head > < body > < div class = "container" > < h1 class = "text-center text-success" > w3wiki </ h1 > < h3 class = "text-center" > Using Utility Classes </ h3 > < p class = "text-center" > A computer science portal for Beginner </ 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 “w3wiki,” 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/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet" > </ head > < body > < div class = "container d-flex justify-content-center" > < div > < h1 class = "text-success" >w3wiki</ h1 > < h3 >Using FlexBox Classes</ h3 > < p >A computer science portal for Beginner</ 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 “w3wiki,” 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/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet" > </ head > < body > < div class = "container" > < div class = "row" > < div class = "col text-center" > < h1 class = "text-success" >w3wiki</ h1 > < h3 >Using Grid Classes</ h3 > < p >A computer science portal for Beginner</ p > </ div > </ div > </ div > </ body > </ html > |
Output:
Contact Us