- var cardText = 'This is a wider card with supporting text below as a natural lead-in to additional content.';
- var cardTag = '#space';
- var cards =[{'title':'Card title one','image':'dBaz0xhCkPY','text':cardText,'tag':cardTag},{'title':'Card title two','image':'e5eDHbmHprg','text':cardText,'tag':cardTag},{'title':'Card title three','image':'5e9CmF-Ge9Y','text':cardText,'tag':cardTag},{'title':'Card title four','image':'OLlj17tUZnU','text':cardText,'tag':cardTag},{'title':'Card title five','image':'pd4lo70LdbI','text':cardText,'tag':cardTag},{'title':'Card title six','image':'cIX5TlQ_FgM','text':cardText,'tag':cardTag},{'title':'Card title seven','image':'CpHNKNRwXps','text':cardText,'tag':cardTag},{'title':'Card title eight','image':'lcT_p8kLCsc','text':cardText,'tag':cardTag}];

.container(class='my-4')
  .card-columns
    each card in cards
      div(class='card border-0 text-white')
        img(
          class='card-img rounded-0'
          src='https://source.unsplash.com/'+card.image+'/1200'
        )
        div(class='card-img-overlay p-0')
          div(class='card-block')
            h5(class='card-title')= card.title
              a(
                class='stretched-link'
                href='#'
              )
            p(class='card-text')= card.text
            small(class='text-mutted')= card.tag
View Compiled
$cardColor: #1c2e4c;
@mixin absolute-zero {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.card-columns {
  column-count: 1;
  @media (min-width: 768px) {
    column-count: 2;
  }
  @media (min-width: 1200px) {
    column-count: 3;
  }
}
.card-img-overlay {
  .card-block {
    @include absolute-zero;
    padding: 1.25rem;
    z-index: 1;
  }
  &::after {
    content: '';
    @include absolute-zero;
    z-index: 0;
    background-color: rgba($cardColor, .8);
    transition: all .3s ease-in-out;
  }
  &:hover {
    &::after {
      background-color: rgba($cardColor, .2);
    } 
  }
}
View Compiled

External CSS

  1. https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.5.1.slim.min.js
  2. https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js
  3. https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js