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.
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.
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.
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.
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.
