HomeSoftware DevelopmentBootstrap 5 Playing cards Sizing utilizing Utilities

# Bootstrap 5 Playing cards Sizing utilizing Utilities

Bootstrap 5 Playing cards Utilizing utilities: The peak and weight of the cardboard may be arrange utilizing card utilities. We are able to use lessons like w-* and h-* to set the width and top of the cardboard respectively. This * may be substituted with the required proportion worth.

Bootstrap 5 Playing cards Sizing utilizing utilities Class: No particular lessons have been used, Bootstrap 5 Sizing class will do the duty for Card sizing.

Syntax:

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

Instance 1: On this instance, we are going to set the width of the cardboard utilizing class w-50

## HTML

 `` `<``html``>` ` `  `<``head``>` `    ` `    ``<``hyperlink` `href``=` `          ``rel``=``"stylesheet"` `          ``integrity``=` `"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"`  `          ``crossorigin``=``"nameless"``>` `  ``<``title``>Playing cards Utilizing Utilities` `` ` `  `<``physique` `class``=``"w-8 m-1"``>` `    ``<``div``>` `        ``<``h1` `class``=``"text-success"``>` `            ``GeeksforGeeks` `        ``` `        ``<``h3``>Playing cards Utilizing Utilities` ` `  `        ``<``div` `class``=``"card w-50"``>` `            ``<``img` `src``=` `                 ``class``=``"card-img-top"``>` `            ``<``div` `class``=``"card-body"``>` `                ``<``h5` `class``=``"card-title"``>Java` `                ``<``p` `class``=``"card-text"``>Java is Object Oriented.` `                    ``Nonetheless, it's not thought-about as pure` `                    ``object-oriented because it supplies assist for` `                    ``primitive knowledge varieties (like int, char, and many others)` `                ``` `            ``` `        ``` `    ``` `` ``

Output:

Instance 2: On this instance, we are going to use top (h-100 ) and width (w-50) utilities collectively

## HTML

 `` `<``html``>` ` `  `<``head``>` `    ` `    ``<``hyperlink` `href``=` `         ``rel``=``"stylesheet"` `         ``integrity``=` `"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"`  `         ``crossorigin``=``"nameless"``>` `   ``<``title``>Playing cards Utilizing Utilities` `` ` `  `<``physique` `class``=``"w-8 m-1"``>` `    ``<``div``>` `        ``<``h1` `class``=``"text-success"``>` `            ``GeeksforGeeks` `        ``` `        ``<``h3``>Playing cards Utilizing Utilities` ` `  `        ``<``div` `class``=``"card h-100 w-50"``>` `            ``<``img` `src``=` `                 ``class``=``"card-img-top"``>` `            ``<``div` `class``=``"card-body"``>` `                ``<``h5` `class``=``"card-title"``>Java` `                ``<``p` `class``=``"card-text"``>Java is Object Oriented. ` `                        ``Nonetheless, it's not thought-about as pure` `                        ``object-oriented because it supplies assist ` `                        ``for primitive knowledge varieties (like int, char, and many others) ` `                ``` `            ``` `        ``` `    ``` `` ``

Output:

RELATED ARTICLES