Bootstrap class: .card-footer

<div class="card">
  <div class="card-body">
    <p class="card-text">Some more card content</p>
  </div>
  <div class="card-footer">
    2 days ago
  </div>
</div>

Preview

Some more card content

2 days ago

Check .card-footer 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:85 */
.card-footer {
  padding: $card-spacer-y $card-spacer-x;
  background-color: $card-cap-bg;
  border-top: $card-border-width solid $card-border-color;

  &:last-child {
    @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
  }
}

/* _card.scss:205 */
.card-footer {
  border-bottom-right-radius: 0;
}

/* _card.scss:218 */
.card-footer {
  border-bottom-left-radius: 0;
}

/* _card.scss:231 */
.card-footer {
  @include border-bottom-radius($card-border-radius);
}

/* _card.scss:242 */
.card-footer {
  @include border-radius(0);
}

Uses variables

/* _card.scss:85 */
$card-spacer-y
$card-spacer-x
$card-cap-bg
$card-border-width
$card-border-color
$card-inner-border-radius
$card-inner-border-radius

/* _card.scss:205 */


/* _card.scss:218 */


/* _card.scss:231 */
$card-border-radius

/* _card.scss:242 */