Bootstrap class: .card-header

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
</div>

Preview

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Check .card-header 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:68 */
.card-header {
  padding: $card-spacer-y $card-spacer-x;
  margin-bottom: 0; // Removes the default margin-bottom of <hN>
  background-color: $card-cap-bg;
  border-bottom: $card-border-width solid $card-border-color;

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

  + .list-group {
    .list-group-item:first-child {
      border-top: 0;
    }
  }
}

/* _card.scss:201 */
.card-header {
  border-top-right-radius: 0;
}

/* _card.scss:214 */
.card-header {
  border-top-left-radius: 0;
}

/* _card.scss:227 */
.card-header {
  @include border-top-radius($card-border-radius);
}

Uses variables

/* _card.scss:68 */
$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:201 */


/* _card.scss:214 */


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