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. If want to learn more about how to create cards, check out our Bootstrap 4 cards tutorial.

Inside the Lazy Kit we have restyled the basic Bootstrap 4 cards. We have also added a default hover effect. If you want to disabled it, you need to add the .no-hover class. Here is how a basic example looks:

<div class="card">
  <div class="card-body">
    This is some text within a card block.
  </div>
</div>

Adding elements

You can achieve interesting results by adding images, setting a title and using buttons.

<div class="card">
  <div class="card-header">
    <img class="card-img" src="assets/img/dog-1.jpg" alt="dog">
  </div>
  <div class="card-body">
    <span class="badge badge-success">Pets</span>
    <h4 class="card-title mt-2">How to look after and care for a dog</h4>
    <p class="card-text">Owning a dog is great fun and immensely rewarding. But, dogs have complex needs and each dog is unique. </p>
  </div>
  <div class="card-footer">
    <a href="#a" class="btn btn-primary">Read More</a>
  </div>
</div>

Sizing Cards

Cards are block elements, so occupy the full-width of the parent element, but you can esily control their sizing by utilizing grid markup or sizing utilities.

<div class="row">
  <div class="col-md-6">
    <div class="component">
      <div class="card">
        <div class="card-header">
          <img class="card-img" src="assets/img/dog-3.jpg" alt="dog">
        </div>
        <div class="card-body">
          <span class="badge badge-secondary">Hobby</span>
          <h4 class="card-title mt-2">Getting Started With Your Puppy</h4>
          <p class="card-text">This new addition to your family will require lots of love, attention and plenty of supplies. </p>
        </div>
        <div class="card-footer">
          <a href="#a" class="btn btn-outline-primary">Read More</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="component">
      <div class="card">
        <div class="card-header">
          <img class="card-img" src="assets/img/dog-2.jpg" alt="dog">
        </div>
        <div class="card-body">
          <span class="badge badge-warning">Vacation</span>
          <h4 class="card-title mt-2">Woof! How to find dog-friendly beaches in Spain</h4>
          <p class="card-text">Considering Spain's abundant coastline, beaches that do allow you to take your pooch to feel sand... </p>
        </div>
        <div class="card-footer">
          <a href="#a" class="btn btn-outline-primary">Read More</a>
        </div>
      </div>
    </div>
  </div>
</div>

You can also add navigation to cards, change the card background color and see more sizing options here.