Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
Bootstrap documentation

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Sizing

Control the padding of .card-body and .card-footer elements with the following modifiers:

Image hover

Switch between two images on hover with the following markup:

<div class="card" style="max-width: 320px;">
  <div class="card-img">
    <div class="card-img-hover">
      <img class="card-img-top card-img-back" src="../assets/img/products/product-120.jpg" alt="...">
      <img class="card-img-top card-img-front" src="../assets/img/products/product-5.jpg" alt="...">
    </div>
  </div>
</div>


Background

Add a background image that translates on hover with the following markup:

Circle

A circle badge with two sizing and three positioning options.

Badge

A standard badge component with two positioning options.

Price

Adds a pricing badge in the top left or right corner of a card.

$59.00

<div class="card" style="max-width: 320px;">

  <!-- Price -->
  <div class="btn btn-white btn-sm card-price card-price-start">$59.00</div>

  <!-- Image -->
  <img src="../assets/img/products/product-65.jpg" alt="..." class="card-img-top">

</div>

<div class="card" style="max-width: 320px;">

  <!-- Price -->
  <div class="btn btn-white btn-sm card-price card-price-end">$59.00</div>

  <!-- Image -->
  <img src="../assets/img/products/product-65.jpg" alt="..." class="card-img-top">

</div>


Actions

Card action buttons fading in on hover.

<div class="card">
  <div class="card-img">

    <!-- Image -->
    <img class="card-img-top" src="../assets/img/products/product-6.jpg" alt="...">

    <!-- Actions -->
    <div class="card-actions">
      <span class="card-action">
        <button class="btn btn-xs btn-circle btn-white-primary" data-bs-toggle="modal" data-bs-target="#modalProduct">
          <i class="fe fe-eye"></i>
        </button>
      </span>
      <span class="card-action">
        <button class="btn btn-xs btn-circle btn-white-primary" data-toggle="button">
          <i class="fe fe-shopping-cart"></i>
        </button>
      </span>
      <span class="card-action">
        <button class="btn btn-xs btn-circle btn-white-primary" data-toggle="button">
          <i class="fe fe-heart"></i>
        </button>
      </span>
    </div>

  </div>
</div>


Action

Card action button always visible in the top left or right corner.

<div class="card" style="max-width: 320px;">
  <div class="card-img">

    <!-- Image -->
    <img class="card-img-top" src="../assets/img/products/product-7.jpg" alt="...">

    <!-- Action -->
    <button class="btn btn-xs btn-circle btn-white-primary card-action card-acton-start" data-toggle="button">
      <i class="fe fe-heart"></i>
    </button>

  </div>
</div>

<div class="card" style="max-width: 320px;">
  <div class="card-img">

    <!-- Image -->
    <img class="card-img-top" src="../assets/img/products/product-7.jpg" alt="...">

    <!-- Action -->
    <button class="btn btn-xs btn-circle btn-white-primary card-action card-action-end" data-toggle="button">
      <i class="fe fe-heart"></i>
    </button>

  </div>
</div>


Button

Card button visible in the bottom of a card on hover.

Quick View

<div class="card">
  <div class="card-img">

    <!-- Image -->
    <img class="card-img-top" src="../assets/img/products/product-6.jpg" alt="...">

    <!-- Button -->
    <button class="btn btn-xs w-100 btn-dark card-btn" data-bs-toggle="modal" data-bs-target="#modalProduct">
      <i class="fe fe-eye me-2 mb-1"></i> Quick View
    </button>

  </div>
</div>


Collapse

Card collapse toggled on hover.

Leather Sneakers Shoes

$115.00

$85.00

6

6.5

7

7.5

8.5

<div class="card" data-toggle="card-collapse">

    <!-- Image -->
    <img class="card-img-top" src="../assets/img/products/product-7.jpg" alt="..." />

    <!-- Collapse -->
    <div class="card-collapse-parent">

      <!-- Body -->
      <div class="card-body px-0 pb-0 bg-white">...</div>

      <!-- Footer -->
      <div class="card-collapse collapse">
        <div class="card-footer px-0 bg-white">...</div>
      </div>

    </div>

  </div>