Bootstrap | Cards

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 panels, wells and thumbnails. As all of it can be used in a single container called card.
EXAMPLE :

BASIC CARD :

The building block of a card is the card-body and with card.
EXAMPLE :

OUTPUT :

HEADER AND FOOTER :

The card-header provides header to the cards and card-footer provides footer to the cards.
EXAMPLE :

OUTPUT :

CARD TITLE and LINKS :


OUTPUT :

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 STYLES :

Making the card to tell about it by setting it to the color of the alerts, so that it may be easy for the user to understand what does the particular card stands for. It consist of the colors used in the alerts.
EXAMPLE :
OUTPUT :



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.
EXAMPLE :
OUTPUT :
EXAMPLE OF BOTTOM-IMAGE :
OUTPUT :

IMAGE OVERLAYS :

In this we have to just use an extra class call the card-img-overlay in the same line of code which you have used for card images.
EXAMPLE :
OUTPUT :

CARD LAYOUT :

With the help of card-group and card-deck this can be done.
EXAMPLE :
OUTPUT :
EXAMPLE FOR CARD-GROUP :
OUTPUT :

List groups :

It creates a list of content in a card.
EXAMPLE :
OUTPUT :

Kitchen sink :

It is name given to the type of card which consist everything thing in it, it’s a mix and match of multiple content to make your desired card
EXAMPLE :
OUTPUT :

NAVIGATION :

It adds navigation bar to the cards.
EXAMPLE :
OUTPUT :
ANOTHER EXAMPLE in PILLS FORM :
OUTPUT :



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.