Please note, this is a STATIC archive of website www.javatpoint.com from 19 Jul 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.
Javatpoint Logo
Javatpoint Logo

Bootstrap 5 Cards

In Bootstrap 5, a card is a bordered box with padding surrounding its text. There are options for headers, footers, content, and colors. The card uses to contain web application functions such as form, table and other user interactive features.

Basic card

The "card" class uses to construct a basic card, and the "card-body" class uses for card content. The card function creates a basic card, and the card body contains the required information for the application.

Syntax

The following syntax helps to create basic card on the web page.

Examples

The following example shows card function using bootstrap 5 classes.

Output

The following image shows the basic bootstrap 5 card function.

Bootstrap 5 Cards

Card with header and footer

The "card" class creates a basic card, and the "card-body" contains the required information for the application. The "card-header" contains and displays the heading of the card information. The "card-footer" displays footer information of the page or function.

Syntax

The following syntax helps to create bootstrap 5 card with header and footer on the web page.

Examples

The following example shows card function using bootstrap 5 classes. we can place card header, body, and footer class in the "card" class.

Output

The following image shows the basic bootstrap 5 card function with header and footer.

Bootstrap 5 Cards

Contextual Card Function

The "card" class creates cards with different background colours using the "bg-primary" contextual class. The "card-body" and other card classes are contained in the card class. The contextual card displays different background colours and the card's meaning. The "bg-info" class shows informative information about the card.

Syntax

The following syntax helps to create bootstrap 5 contextual card on the web page.

Examples

The following example shows contextual card function using bootstrap 5 classes. we can use different background color for the card.

Output

The following image shows the bootstrap 5 contextual card function.

Bootstrap 5 Cards

Card with title, link and text

The card contains text, title, and link using the "card-text", "card-title", and "card-link" classes, respectively. This class uses in the "card-body" class to display functional data. The card title shows the heading of the card function, and the link shows another source on the page. The card text displays core and detailed information about the function.

Syntax

The following syntax helps to create bootstrap 5 card with title, link, and text on the web page.

Examples

The following example shows card function with other functions using bootstrap 5 classes. we can place link and other card information in the "card-body" class.

Output

The following image shows the bootstrap 5 card function with title, link and information.

Bootstrap 5 Cards

Card with image

The card contains an image on the top, and bottom of the function using the "card-img-top" and "card-img-bottom" classes, respectively. This class uses in the <img> tag in the <card> class. The <img> tag is required to set an image on the card with the required width in a CSS style.

Syntax

The following syntax helps to create bootstrap 5 card with image on the web page.

Examples

The following example shows card function with image using bootstrap 5 classes. we can place image top side of the card. The <img> tag uses in the "card" class.

Output

The following image shows the bootstrap 5 card function with the image and other information.

Bootstrap 5 Cards

Card with image overlay

The card contains an image of the function's top, bottom, and centre alignment. The image sets as a background of the card using the "card-img-overlay" class. The <img> tag is required to set an image on the card. The width requires 100% in CSS style for the given image.

Syntax

The following syntax helps to create bootstrap 5 card with image on the web page.

Examples

The following example shows card function with image using bootstrap 5 classes. we can place image top side of the card. The <img> tag uses in the "card" class.

Output

The following image shows the bootstrap 5 card function with the background image and other information.

Bootstrap 5 Cards

Conclusion

Bootstrap 5 card uses to contain interactive user functions on the web page. This card is simple, attractive and uses interactive functions. It helps to display information in a structured format in minimum space.







Youtube For Videos Join Our Youtube Channel: Join Now

Feedback


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA