Bootstrap 5 Cards Sizing using Utilities Last Updated : 26 Dec, 2022 Comments Improve Suggest changes Like Article Like Report Bootstrap 5 Cards Using utilities: The height and weight of the card can be set up using card utilities. We can use classes like w-* and h-* to set the width and height of the card respectively. This * can be substituted with the required percentage value. Bootstrap 5 Cards Sizing using utilities Class: No special classes have been used, Bootstrap 5 Sizing class will do the task for Card sizing. Syntax: <div class="card w-*"> <div class="card-body"> Content </div> </div> Example 1: In this example, we will set the width of the card using class w-50 HTML <!DOCTYPE html> <html> <head> <!-- Bootstrap CDN--> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Cards Using Utilities</title> </head> <body class="w-8 m-1"> <div> <h1 class="text-success"> GeeksforGeeks </h1> <h3>Cards Using Utilities</h3> <div class="card w-50"> <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 use height (h-100 ) and width (w-50) utilities together HTML <!DOCTYPE html> <html> <head> <!-- Bootstrap CDN --> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Cards Using Utilities</title> </head> <body class="w-8 m-1"> <div> <h1 class="text-success"> GeeksforGeeks </h1> <h3>Cards Using Utilities</h3> <div class="card h-100 w-50"> <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: References: https://getbootstrap.com/docs/5.0/components/card/#using-utilities Comment More infoAdvertise with us Next Article Bootstrap 5 Cards Sizing using custom CSS A akshitsaxena2 Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Similar Reads Bootstrap 5 Cards Body Bootstrap 5 Cards Body is used to create the card's body is the main part of the card which contains the title, sub-title all the things that a card contains. Bootstrap 5 Cards Body Class: card-body: This class is used for creating the body of the card. Syntax: <div class="card"> <div class 2 min read Bootstrap 5 Cards Titles, text, and links Cards Titles, text, and links are used to add a title, text content, and links to a card. The .card-title class is used with <h*> tag to create the card title and the .card-subtitle class is used with <h*> tag to create the card subtitle. Similarly, the .card-link class is used with < 2 min read Bootstrap 5 Cards Images Bootstrap 5 Cards Images facilitates adding the image to the card, which may contain the content. The image can be appended to either of the ends of the card or can be overlayed the image with the card content, or can be simply embedded into the card. Images enhance the appearance of the card and ma 3 min read Bootstrap 5 Cards List groups Bootstrap 5 Cards List groups are used to create a group of lists inside the card to show information like features, pricing, and many more. Cards List groups used Classes: No special classes are used in List groups. You can customize the component using List groups classes. Syntax: <div class="c 2 min read Bootstrap 5 Cards Kitchen sink The card is a component provided by Bootstrap 5 which 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. The kitchen sink 2 min read Bootstrap 5 Cards Sizing 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 elemen 2 min read Bootstrap 5 Cards Sizing using Utilities Bootstrap 5 Cards Using utilities: The height and weight of the card can be set up using card utilities. We can use classes like w-* and h-* to set the width and height of the card respectively. This * can be substituted with the required percentage value. Bootstrap 5 Cards Sizing using utilities Cl 2 min read 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 cu 2 min read Bootstrap 5 Cards Text Alignment A card is a flexible and extensible content container that shows the information overview shortly. We can resize the card container, align text as we want, and add images. We can change the alignment of the text of the card using text align classes. We can change specific entity alignment. We can us 2 min read Bootstrap 5 Cards Navigation Bootstrap 5 Cards navigation refers to a user interface design pattern where related information is organized into individual cards that can be interacted with and rearranged for easy viewing and access. This approach is commonly used in mobile app design and website design for a visually appealing 2 min read Like