Bootstrap 5 Cards Sizing using custom CSS

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.

Output:

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

File Name: style.css

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

Output:

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