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

Output:

👁 Image

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

Output:

👁 Image

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