Open In App

Bootstrap Cards

Last Updated : 12 Sep, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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 card .

Basic Card

The building block of a card is the card-body within the parent class card. Bootstrap Cards are flexible content containers that can include text, images, links, and more.

Card Title and Links

The card-title is used to give a title to the card and card-link is used to provide 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.

Card-Groups

Bootstrap Card-Groups are a way to group multiple cards together in a single container. They create a unified layout where cards share the same width and height, automatically aligning the content.

List groups

Bootstrap List Groups are flexible and versatile components used to display a series of items in a list format. They can be used for navigation, displaying simple text lists, links, buttons, badges, or custom content.

Kitchen sink

It is the name given to the type of card which consists of everything in it, it's a mix and match of multiple contents to make your desired card

Navigation

Bootstrap Navigation components provide responsive, accessible menus including Navs, Navbars, Tabs, Pills, and Dropdowns. They offer customizable layouts for links, forms, and collapsible content across devices.

Navigation Pills Form

Bootstrap Navigation Pills are a type of navigation component that displays items as horizontal or vertical pills.

Supported Browsers:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari

Next Article
Practice Tags :

Similar Reads