Bootstrap: Component "Card"

Post Views: 21

Cards:

A card in Bootstrap 4 is a bordered box with some padding around its content.
It includes options for headers, footers, content, colors, etc.
A basic card is created with the .card class.
The .card-header class adds a heading to the card and the .card-footer class adds a footer to the card.
add a background color the card, use contextual classes. ( .bg-primary, .bg-success……).
Add .card-img-top or .card-img-bottom to an <img> to place the image at the top or at the bottom inside the card.
Add the .stretched-link class to a link inside the card.
.card-img-overlay to add text on top of the image.
The .card-columns class creates a masonry-like grid of cards.
.card-deck class creates a grid of cards that are of equal height and width.
The cards are displayed vertically on small screens (less than 576px).
The .card-group class is similar to .card-deck. The only difference is that the .card-group class removes left and right margins between each card.

&lt;div class="card">
  &lt;div class="card-body">Basic card&lt;/div>
&lt;/div>