Open In App

Bootstrap 5 Cards Sizing

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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>
    <!-- Load Bootstrap -->
    <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>
    <!-- Load Bootstrap -->
    <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
Previous
Next
Share your thoughts in the comments
Similar Reads