Bootstrap 5 Cards Sizing using custom CSS

Last Updated : 28 Apr, 2025

Bootstrap 5 card component provides a flexible and extensible content container with multiple variants and options. It includes options for headers and footers. Cards support a wide variety of content, including images, text, list groups, links, and more.

Cards using custom CSS is used to set the custom CSS styles in external stylesheets or as inline styles to set the width of the card.

Syntax:

<div class="card" style="...">
     <div class="card-body">
           Content
     </div>
</div>

Example 1: In this example, we will set the width of the card using inline CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Bootstrap 5 Cards Sizing using custom CSS
    </title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>

        <h3>Cards Using custom CSS</h3>

        <div class="card" style="width: 18rem;">
            <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:

Example 2: In this example, we will set the width of the card using an external stylesheet.

File Name: style.css

CSS

#GFG {
    width: 18rem;
}

HTML File: We will import style.css in this HTML File.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Bootstrap 5 Cards Sizing using custom CSS
    </title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <link href="./style.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>

        <h3>Cards Using custom CSS</h3>

        <div class="card" id="GFG">
            <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:

Reference: https://getbootstrap.com/docs/5.0/components/card/#using-custom-css

Bootstrap 5 Cards Text Alignment

akshitsaxena2

Improve

Article Tags :

Bootstrap 5 Cards Sizing using custom CSS

Similar Reads

Thank You!

What kind of Experience do you want to share?