How to use Bootstrap 4 cards

Overview

One of the newest additions to Bootstrap 4 is cards. A card is a content container that is flexible and easy to extend. It can be customized, styled, and displayed to fit the user's preference. They are also responsive by default.

The main class that offers the card functionalities is the .card class. All other additional properties go inside the .card element.

Components of a card

A .card class comes with additional classes that define how the content can be placed:

• .card-body: This class represents the body of the card and comes with additional padding.
• To add a title to our card, we can use the .card-title class on any of the h1-h6 elements. Alternatively, to add a subtitle, we can use the .card-subtitle class.
• Images can also be placed on a card, depending on the position we have in mind. There is .card-img-top, .card-img-bottom, and .card-img-overlay.
• Header and footers can also be added using the .card-header and .card-footer classes. 

Layouts of a card

The layout of a card can be customized or placed on a page, depending on how we want it to be placed. Some of the options for the layout are:

• Using card groups: With the use of the .card-group class in a div, we can create multiple cards of equal height and width to stick together.
• Another alternative is to use the .card-decks class in a div, which creates multiple cards of equal height and width that are spaced out.

• Using the bootstrap grid system: This consists of placing the cards in rows and columns.

Demo: Creating a custom profile card

To gain a better understanding of this, we're going to create a custom profile card using the Bootstrap card:

Using the .card class, we were able to create a template that consists of a card-img-top and a .card-text class and also includes some buttons to the UI.

We can dive deeper into the uses of the Bootstrap card by creating and customizing different templates and layouts, depending on what we plan to achieve.