Bootstrap center text
Bootstrap uses different alignment classes to align text. These alignment classes are .text-left , .text-right, .text-center . Here we are going to discuss center text using Bootstrap. The .text-center class is used to center the text in Bootstrap. Here is an example to align text to the center using Bootstrap classes.
Example: Aligning the text in the center using Bootstrap
Here is a Bootstrap program used for center alignment of text using .text-center class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="text-center">
<p>.text-center is used to align text to the center of the element.</p>
</div>
</body>
</html>
Output:
Here is the output of the above program.
![Center text](https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1619851333-101156.png)
Bootstrap Responsive class
The responsive class can be used with .text-center to view the text from different responsive viewpoints. For example
- .text-sm-center is used for aligning text to the center on the small screen devices.
- .text-md-center is used for aligning text to center on the medium screen devices.
- .text-lg-center is used for aligning text to center on the large screen devices.
- .text-xl-center is used for aligning text to center on the extra-large screen devices.
Example: Creating a responsive layout using Bootstrap responsive classes
Here is a Bootstrap program used for center alignment of text using responsive class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<p class="text-sm-center"> This is used of aligning text to center on small devices </p>
<p class="text-md-center"> This is used of aligning text to center on medium devices </p>
<p class="text-lg-center"> This is used of aligning text to center on large devices </p>
<p class="text-xl-center"> This is used of aligning text to center on extra large devices </p>
<div>
</body>
</html>
Output:
Here is the output of the above program.
![Responsive text-center](https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1619852309-101156.png)
Adding colors using Bootstrap
We can add color to center text using the color utility class. Add colors like .text-primary , .text-secondary, .text-success, .text-warning, .text-danger,etc to customize text. Here is an example to use color utility class with center text.
Example: Adding colors using Bootstrap classes
Here is a Bootstrap program used for center alignment of text using responsive class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<p class="text-center text-primary"> Primary center text </p>
<p class="text-center text-secondary"> Secondary center text </p>
<p class="text-center text-success"> success center text </p>
<p class="text-center text-warning"> warning center text </p>
<p class="text-center text-danger"> danger center text </p>
<div>
</body>
</html>
Output:
Here is the output of the above program.
![Centertext with colors](https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1619853470-101156.png)
Bootstrap Heading
Headers text can also be aligned centrally. Use .text-center within header class. Let us see an example to align the header text.
Example: Creating headings using Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2 class="text-center"> Heading with center alignment </h2>
<h3 class="text-center"> Heading with center alignment </h3>
<h4 class="text-center"> Heading with center alignment </h4>
<h5 class="text-center"> Heading with center alignment </h5>
<h6 class="text-center"> Heading with center alignment </h6>
<div>
</body>
</html>
Output:
Here is the output of center text with different types of headers.
![Header with text center](https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1619854032-101156.png)
Conclusion
So here we discussed how we can center align text and also make modifications to the center text. You can add responsive, color utility to it.