Bootstrap 5 Cards Sizing can set the width of the card using custom CSS, grid classes, grid Sass mixins, or utilities.
- Using Custom CSS: Here we can use inline CSS or external CSS to set the width of the card
- Grid Classes: Wrap cards in columns and rows using the grid.
- Using Utilities: Use size utility classes to like w-50 to set the width of the card
Example 1: In this example, we will learn about Cards using custom CSS, and set the size of cards using inline CSS
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
</ head >
< body class = "w-8 m-1" >
< div >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 >Cards Using custom CSS</ h3 >
< div class = "card" style = "width: 350px;" >
< 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 learn about Cards using utilities
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
</ head >
< body class = "w-9 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:
References: https://getbootstrap.com/docs/5.0/components/card/#sizing
Last Updated :
02 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...