Cards

A card is a Bootstrap component that serves as a versatile and adaptable information container. E-commerce, news, blogging, and social media websites all employ cards. Cards are visually appealing and help break up long lines of content on a page. Let’s take a look at an example of a course card on the Educative website.

In Bootstrap, a card is primarily comprised of three components:

• Header: .card-header
• Body: .card-body
• Footer: .card-footer

Note: The use of a header and footer in a card is optional. Therefore, they may not always exist in a Bootstrap card.

Let’s take a look at how to implement cards using Bootstrap classes.

Sizing

By default, cards don’t have a fixed width. Instead, they fill the full width of their parent element. In the example above, we ...