What are Bootstrap cards?

Web Development
,
#1

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

It replaces the use of panels, wells, and thumbnails. All of it can be used in a single container called a card.

  • BASIC CARD: The building block of a card is the card body and card.

  • HEADER AND FOOTER: The card header provides the header to the cards and the card footer provides the footer to the cards.

  • CARD TITLE and LINKS: The card title is used to give a title to the card and the card link is used to provide a link to the card if required in it.

  • CARD IMAGES: The images to the card are inserted with card-img-top and with card-img-bottom with the help of these two and img tag is used with it to input the image.

  • IMAGE OVERLAYS: In this, we have to just use an extra class called the card-img-overlay in the same line of code which you have used for card images.

  • List groups: It creates a list of content in a card.

  • Kitchen sink: It is a name given to the type of card which consists of everything thing in it, it’s a mix and match of multiple contents to make your desired card

  • NAVIGATION: It adds a navigation bar to the cards.