Bootstrap Cards Sizing refers to the ability to control the dimensions of cards in Bootstrap by using predefined classes such as col, col-sm, col-md, col-lg, col-xl, and col-xxl. This ensures consistency and responsiveness across various screen sizes, maintaining a uniform appearance for card elements.
Bootstrap 5 Cards Sizing can set the width of the card using custom CSS, grid classes, grid Sass mixins, or utilities.
| Class | Description |
|---|---|
| col | Sets the column width equally for all screen sizes. |
| col-sm | Adjust the column width for small-sized screens. |
| col-md | Adjusts the column width for medium-sized screens. |
| col-lg | Adjusts the column width for large-sized screens. |
| col-xl | Adjusts the column width for extra-large screens. |
| col-xxl | Adjusts the column width for extra-large screens. |
Examples of Bootstrap Cards Sizing
Example 1: In this example, we will learn about Cards using custom CSS, and set the size of cards using inline CSS
<!DOCTYPE html>
<html>
<head>
<!-- Load Bootstrap -->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body class="p-3">
<div class="container">
<div class="w-50">
<h3 class="mb-4">Cards Using Bootstrap 5 Sizing</h3>
<div class="card" style="max-width: 350px;">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png"
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>
</div>
</body>
</html>
Output
Example 2: Bootstrap 5 Cards Sizing example utilizes "w-75" class to set card width to 75% of the parent container, displaying an image and text content for Java programming language.
<!DOCTYPE html>
<html>
<head>
<!-- Load Bootstrap -->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body class="m-4">
<div>
<h3>Cards Using Bootstrap 5 Sizing</h3>
<div class="card w-75">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png"
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:
