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
<!DOCTYPE html>
<html>
<head>
<hyperlink href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="nameless">
<title>Playing cards Utilizing Utilities</title>
</head>
<physique class="w-8 m-1">
<div>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>Playing cards Utilizing 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.
Nonetheless, it's not thought-about as pure
object-oriented because it supplies assist for
primitive knowledge varieties (like int, char, and many others)
</p>
</div>
</div>
</div>
</physique>
</html>
|
Output:
Instance 2: On this instance, we are going to use top (h-100 ) and width (w-50) utilities collectively
HTML
<!DOCTYPE html>
<html>
<head>
<hyperlink href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="nameless">
<title>Playing cards Utilizing Utilities</title>
</head>
<physique class="w-8 m-1">
<div>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>Playing cards Utilizing 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.
Nonetheless, it's not thought-about as pure
object-oriented because it supplies assist
for primitive knowledge varieties (like int, char, and many others)
</p>
</div>
</div>
</div>
</physique>
</html>
|
Output:
References: https://getbootstrap.com/docs/5.0/parts/card/#using-utilities
