Bootstrap class: .card-link

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <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="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Preview

Card title

Card subtitle

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

Card link Another link

Check .card-link 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:59 */
+ .card-link {
  margin-left: $card-spacer-x;
}
}

//
// Optional textual caps
//

.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;
  }

Uses variables

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