Bootstrap 5 Cards Text Alignment

Last Updated : 13 Dec, 2022

A card is a flexible and extensible content container that shows the information overview shortly. We can resize the card container, align text as we want, and add images.

We can change the alignment of the text of the card using text align classes. We can change specific entity alignment. We can use these text-alignment classes to move text according to user preferences and viewport width.

Syntax:

<div class="card text-alignment class">
    <div class= "card-body">
    ...
    </div>
</div>

Example 1: Here is an example to further explain card-text alignment. In this example, class text-center is used. We can apply it to any text element like a heading, paragraph, etc.

HTML

<!doctype html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content= 
"width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" /> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="m-2"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <strong>Bootstrap 5 Card Text Alignment</strong> 
        <div class="card text-center" style="width: 18rem;"> 
            <div class="card-body"> 
                <h5 class="card-title">Welcome</h5> 
                <p class="card-text"> 
                    Build your career safe by Geeksforgeeks choosing courses. 
                </p> 
                <a href="#" class="btn btn-primary">View Courses</a> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Bootstrap 5 Cards Text alignment

Example 2: In this example, we align text at the right-hand side towards the end of the viewport using the text-end class.

HTML

<!doctype html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content= 
"width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" /> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="m-3"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <strong>Bootstrap 5 Card Text Alignment</strong> 
        <div class="card text-end" style="width:18rem;"> 
            <div class="card-body"> 
                <h5 class="card-title">Welcome</h5> 
                <p class="card-text"> 
                    Build your career safe by Geeksforgeeks choosing courses. 
                </p> 
                <a href="#" class="btn btn-primary">View Courses</a> 
            </div> 
        </div> 
    </div> 
  
</body> 
  
</html>