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.
Use Shuffle AI to build your own Bootstrap templates
Quickly design stunning Bootstrap templates with the power of Shuffle AI — no coding required.
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.
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
Code copied to the clipboard.
Copying failed
/* _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
