 |
VOOZH | about |
|
VOOZH | about |
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 elements.
Bootstrap 5 Cards Sizing can set the width of the card using custom CSS, grid classes, grid Sass mixins, or utilities.
| Class | Description |
|---|---|
| col | Sets the column width equally for all screen sizes. |
| col-sm | Adjust the column width for small-sized screens. |
| col-md | Adjusts the column width for medium-sized screens. |
| col-lg | Adjusts the column width for large-sized screens. |
| col-xl | Adjusts the column width for extra-large screens. |
| col-xxl | Adjusts the column width for extra-large screens. |
Example 1: In this example, we will learn about Cards using custom CSS, and set the size of cards using inline CSS
Output
Example 2: Bootstrap 5 Cards Sizing example utilizes "w-75" class to set card width to 75% of the parent container, displaying an image and text content for Java programming language.
Output:
