Bootstrap 4 Card Designs

Bootstrap 4 Card Designs

A card is a best way to showcase your products, highlight your top-management team in your organization or display your ideal plan, vision, strategy etc.. in your website to improve the satisfaction of customers. To satisfy this Bootstrap 4 cards provides the variety of ideal design options with responsiveness based on your needs.
Let's see how to create a basic card?

• Add card class to create a card
• Add card-body class to include content in your card

For example,

  <div class="card">
    <div class="card-body">
      Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

Cards with Contextual classes

The Bootstrap 4 cards provides wide variety of contextual classes, you can use this to change the background of the card or to change the text color. Lets see how to apply this contextual classes with card.

<div class="card">
    <div class="card-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <br/>
  <div class="card bg-primary text-white">
    <div class="card-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <br/>
    <div class="card bg-info text-white">
    <div class="card-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <br/>
      <div class="card bg-success text-white">
    <div class="card-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <br/>
      <div class="card bg-warning text-white">
    <div class="card-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <br/>
      <div class="card bg-danger text-white">
    <div class="card-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <br/>
      <div class="card bg-light">
    <div class="card-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <br/>
      <div class="card bg-dark text-white">
    <div class="card-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <br/>
      <div class="card bg-secondary text-white">
    <div class="card-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

Card - Titles, text and links

Include card-title class to any heading element to create a card title. The card-link class provides the hyperlink color and hover effects. Use card-text class to add description in your card with ideal responsiveness.  You can also add subtitles by adding card-subtitle class in your heading element.

For Example,

  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <h5 class="card-subtitle mb-2 text-muted">subtitle</h5>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <a href="#" class="card-link">Buy Now</a>
    <a href="#" class="card-link">Add to cart</a>
    </div>
  </div>

Card with Images

Include card-img-top or card-img-bottom class in <img> element to place the image at the top or at the bottom.

See the Pen Bootstrap 4 Card Designs by Prime Study Hub (@PrimeStudyHub) on CodePen.