twbs--bootstrap/scss/_card.scss

//
// Base styles
//

.card {
  position: relative;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  border: .075rem solid #eee;
}
.card-title {
  margin-top: 0;
  margin-bottom: .75rem;
}
.card-text:last-child {
  margin-bottom: 0;
}
.card-actions {
  .card-link + .card-link {
    margin-left: .75rem;
  }
}
.card-link {
  @include hover {
    text-decoration: none;
  }
}


//
// Optional textual caps
//

.card-header {
  padding: .75rem 1.25rem;
  margin: -1.25rem -1.25rem 1.25rem;
  border-bottom: .075rem solid #eee;
  @include border-radius(.25rem .25rem 0 0);
}
.card-footer {
  padding: .75rem 1.25rem;
  margin: 1.25rem -1.25rem -1.25rem;
  border-top: .075rem solid #eee;
  @include border-radius(0 0 .25rem .25rem);
}


//
// Sizing variations
//

.card-sm {
  width: 15rem;
}

.card-md {
  width: 30rem;
}

.card-lg {
  width: 45rem;
}


//
// Background variations
//

.card-primary {
  background-color: $brand-primary;
  border-color: $brand-primary;
}
.card-success {
  background-color: $brand-success;
  border-color: $brand-success;
}
.card-info {
  background-color: $brand-info;
  border-color: $brand-info;
}
.card-warning {
  background-color: $brand-warning;
  border-color: $brand-warning;
}
.card-danger {
  background-color: $brand-danger;
  border-color: $brand-danger;
}


//
// Inverse text within a card for use with dark backgrounds
//

.card-inverse {
  .card-header,
  .card-footer {
    border-bottom: .075rem solid rgba(255,255,255,.2);
  }
  .card-header,
  .card-footer,
  .card-title,
  .card-blockquote {
    color: #fff;
  }
  .card-link,
  .card-text,
  .card-blockquote > footer {
    color: rgba(255,255,255,.65);
  }
  .card-link {
    @include hover-focus {
      color: #fff;
    }
  }
}


//
// Blockquote
//

.card-blockquote {
  padding: 0;
  margin-bottom: 0;
  border-left: 0;
}

// Card image
.card-img {
  margin: -1.325rem;
  @include border-radius(.25rem);
}
.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
}



// Card image caps
.card-img-top {
  margin: -1.325rem -1.325rem 1.25rem;
  @include border-radius(.25rem .25rem 0 0);
}
.card-img-bottom {
  margin: 1.25rem -1.325rem -1.325rem;
  @include border-radius(0 0 .25rem .25rem);
}


//
// Card set
//

.card-set {
  display: table;
  table-layout: fixed;
  border-spacing: 1.25rem 0;

  .card {
    display: table-cell;
    float: none;
    max-width: none;
  }
}
.card-set-wrapper {
  margin-right: -1.25rem;
  margin-left: -1.25rem;
}


//
// Card groups
//

.card-group {
  @if $enable-flex {
    display: flex;
    flex-flow: row wrap;
  } @else {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  .card {
    @if $enable-flex {
      flex: 1 0 0;
    } @else {
      display: table-cell;
    }

    + .card {
      margin-left: 0;
      border-left: 0;
    }
  }
}


//
// Card
//

.card-columns {
  column-count: 3;
  column-gap: 1rem;

  .card {
    display: inline-block;
    width: 100%; // Don't let them exceed the column width
  }
}