Open In App

Bootstrap 5 Cards Sizing using custom CSS

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

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>
        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=
                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>
        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=
                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



Last Updated : 18 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads