Bootstrap: Component “Card”

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.

Syntax:-

<div class="card">
  <div class="card-body">Basic card</div>
</div>

Creat a profile:

Tagged : / / / / / / / / / / / / / / / / /