Open In App

Bootstrap 5 Cards Sizing using Utilities

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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



Last Updated : 26 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads