Bootstrap class: .card

<div class="card">
  <img class="card-img-top" src="/placeholder/pictures/image.svg" alt="Card image cap">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">
      Some quick example text to build on the card title
      and make up the bulk of the card's content.
    </p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Preview

Card title

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

Go somewhere

Check .card in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Open in Visual Editor →

Tips 💡

You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

Sass source

/* _card.scss:5 */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: $card-bg;
  background-clip: border-box;
  border: $card-border-width solid $card-border-color;
  @include border-radius($card-border-radius);

  > hr {
    margin-right: 0;
    margin-left: 0;
  }

  > .list-group:first-child {
    .list-group-item:first-child {
      @include border-top-radius($card-border-radius);
    }
  }

  > .list-group:last-child {
    .list-group-item:last-child {
      @include border-bottom-radius($card-border-radius);
    }
  }
}

/* _card.scss:145 */
.card {
  margin-bottom: $card-deck-margin;
}

/* _card.scss:154 */
.card {
  display: flex;
  // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
  flex: 1 0 0%;
  flex-direction: column;
  margin-right: $card-deck-margin;
  margin-bottom: 0; // Override the default
  margin-left: $card-deck-margin;
}

/* _card.scss:190 */
+ .card {
  margin-left: 0;
  border-left: 0;
}

// Handle rounded corners
@if $enable-rounded {
  &:first-child {
    @include border-right-radius(0);

    .card-img-top,
    .card-header {
      border-top-right-radius: 0;
    }
    .card-img-bottom,
    .card-footer {
      border-bottom-right-radius: 0;
    }
  }

/* _card.scss:257 */
.card {
  margin-bottom: $card-columns-margin;
}

/* _card.scss:267 */
.card {
  display: inline-block; // Don't let them vertically span multiple columns
  width: 100%; // Don't let their width change
}

Uses variables

/* _card.scss:5 */
$card-bg
$card-border-width
$card-border-color
$card-border-radius
$card-border-radius
$card-border-radius

/* _card.scss:145 */
$card-deck-margin

/* _card.scss:154 */
$card-deck-margin
$card-deck-margin

/* _card.scss:190 */
$enable-rounded

/* _card.scss:257 */
$card-columns-margin

/* _card.scss:267 */