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 >
< 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 >
< 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
Share your thoughts in the comments
Please Login to comment...