Bootstrap 5 Cards Sizing using Utilities

Bootstrap 5 Cards Using utilities: The height and weight of the card can be set up using card utilities. We can use classes like w-* and h-* to set the width and height of the card respectively. This * can be substituted with the required percentage value.

Bootstrap 5 Cards Sizing using utilities Class: No special classes have been used, Bootstrap 5 Sizing class will do the task for Card sizing.

Syntax:

<div class="card w-*">
 <div class="card-body">
   Content
 </div>
</div>

Example 1: In this example, we will set the width of the card using class w-50

HTML

<!DOCTYPE html>
<html>

<head>
    <!-- Bootstrap CDN-->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
  <title>Cards Using Utilities</title>
</head>

<body class="w-8 m-1">
    <div>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h3>Cards Using Utilities</h3>

        <div class="card w-50">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png" 
                 class="card-img-top">
            <div class="card-body">
                <h5 class="card-title">Java</h5>
                <p class="card-text">Java is Object Oriented.
                    However, it is not considered as pure
                    object-oriented as it provides support for
                    primitive data types (like int, char, etc)
                </p>
            </div>
        </div>
    </div>
</body>
</html>

Output:

Example 2: In this example, we will use height (h-100 ) and width (w-50) utilities together

HTML

<!DOCTYPE html>
<html>

<head>
    <!-- Bootstrap CDN -->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
         rel="stylesheet"
         integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
         crossorigin="anonymous">
   <title>Cards Using Utilities</title>
</head>

<body class="w-8 m-1">
    <div>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h3>Cards Using Utilities</h3>

        <div class="card h-100 w-50">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png" 
                 class="card-img-top">
            <div class="card-body">
                <h5 class="card-title">Java</h5>
                <p class="card-text">Java is Object Oriented. 
                        However, it is not considered as pure
                        object-oriented as it provides support 
                        for primitive data types (like int, char, etc) 
                </p>
            </div>
        </div>
    </div>
</body>
</html>

Output:

References: https://getbootstrap.com/docs/5.0/components/card/#using-utilities

Bootstrap 5 Cards Sizing using Utilities

Explore