Check out this solution using Sass to adjust the number of cards per line based on different breakpoints: https://codepen.io/migli/pen/OQVRMw

This setup works seamlessly with Bootstrap 4 beta 3

// Defining Bootstrap 4 breakpoints and gutter
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
) !default;

$grid-gutter-width: 30px !default;

// Number of cards per line for each breakpoint
$cards-per-line: (
    xs: 1,
    sm: 2,
    md: 3,
    lg: 4,
    xl: 5
);

@each $name, $breakpoint in $grid-breakpoints {
    @media (min-width: $breakpoint) {
        .card-deck .card {
            flex: 0 0 calc(#{100/map-get($cards-per-line, $name)}% - #{$grid-gutter-width});
        }
    }
}

UPDATE (2019/10)

I've developed an alternative method that utilizes horizontal lists group + flex utilities instead of card-deck:

https://codepen.io/migli/pen/gOOmYLb

This approach simplifies organizing various elements into a responsive grid

<div class="container">
    <ul class="list-group list-group-horizontal align-items-stretch flex-wrap">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <!-- Add as many items as needed -->
    </ul>
</div>

.list-group-item {
    width: 95%;
    margin: 1% !important;
}

@media (min-width: 576px) {
    .list-group-item {
        width: 47%;
        margin: 5px 1.5% !important;
    }
}

@media (min-width: 768px) {
    .list-group-item {
        width: 31.333%;
        margin: 5px 1% !important;
    }
}

@media (min-width: 992px) {
    .list-group-item {
        width: 23%;
        margin: 5px 1% !important;
    }
}

@media (min-width: 1200px) {
    .list-group-item {
        width: 19%;
        margin: 5px .5% !important;
    }
}

After some experimentation, I managed to make it work by incorporating a min-width property into the cards:

<div class="card mb-3" style="min-width: 18rem;">
  <p>Card content</p>
</div>

With this adjustment, the cards maintain a minimum width without losing their layout integrity, ensuring each row is filled evenly and all cards have consistent heights.

To address that issue, I utilized CSS Grid. By utilizing CSS Grid, all elements in the same row will have uniform height.

However, I haven't explored achieving a consistent height for elements in different rows yet.

Regardless, here's a method to accomplish this:

HTML:

<div class="grid-container">

  <div class="card">...</div>
  <div class="card">...</div>
</div>

CSS:

.grid-container {
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

For more details, refer to this JSFiddle link. https://jsfiddle.net/bluegrounds/owjvhstq/4/

<div class="w-100 d-lg-none mt-4"></div>

For my layout, I added 4 cards and positioned this code between the second and third card. Give it a shot and see if it works for you!

If you're utilizing Bootstrap 4.1+ and are concerned about IE 11 compatibility, this answer is for you

Card-deck doesn't adjust the number of visible cards based on viewport size.

The methods mentioned above work but lack IE support. However, with the following technique, you can achieve similar responsive card functionality.

You have the flexibility to control the number of cards displayed at different breakpoints.

In Bootstrap 4.1+, columns have equal height by default; just ensure your card/content utilizes all available space. Try running the snippet provided, and it will become clear.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-lg-4 mb-3">
            <div class="card mb-3 h-100">

                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4 mb-3">
            <div class="card mb-3 h-100">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4 mb-3">
            <div class="card mb-3 h-100">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
    </div>
</div>

Establishing column widths using viewport minimums:

    /* Defining the Number of Cards per Row Based on Viewport Size */
    @media (min-width: 576px) {
        .card-deck .card {
            min-width: 50.1%; /* 1 Column */
            margin-bottom: 12px;
        }
    }

    @media (min-width: 768px) {
        .card-deck .card {
            min-width: 33.4%;  /* 2 Columns */
        }
    }

    @media (min-width: 992px) {
        .card-deck .card {
            min-width: 25.1%;  /* 3 Columns */
        }
    }

    @media (min-width: 1200px) {
        .card-deck .card {
            min-width: 20.1%;  /* 4 Columns */
        }
    }

By utilizing Bootstrap 4.4.1, I successfully established the number of cards per deck with ease by incorporating some scss elements.

HTML

<div class="card-deck deck-1 deck-md-2 deck-lg-3">
   <div class="card">
      <h2 class="card-header">Card 1</h3>
      <div class="card-body">
          Card body
      </div>
      <div class="card-footer">
          Card footer
      </div>
   </div>
   <div class="card">
      <h2 class="card-header">Card 2</h3>
      <div class="card-body">
          Card body
      </div>
      <div class="card-footer">
          Card footer
      </div>
   </div>
   <div class="card">
      <h2 class="card-header">Card 3</h3>
      <div class="card-body">
          Card body
      </div>
      <div class="card-footer">
          Card footer
      </div>
   </div>
</div>

SCSS

// Custom styling to set the number of cards per line for different breakpoints
@for $i from 1 through $grid-columns {
  .deck-#{$i} > .card {
    $percentage: percentage(1 / $i);
    @if $i == 1 {
      $width: $percentage;
      flex-basis: $width;
      max-width: $width;
      margin-left: 0;
      margin-right: 0;
    } @else {
      $width: unquote("calc(#{$percentage} - #{$grid-gutter-width})");
      flex-basis: $width;
      max-width: $width;
    }
  }
}
...

CSS

.deck-1 > .card {
  flex-basis: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0; }

.deck-2 > .card {
  flex-basis: calc(50% - 30px);
  max-width: calc(50% - 30px); }

...

While @Zim's solution was excellent and deserving of an up-vote, it didn't quite meet my needs as I was working with Jekyll and required my card deck to update automatically whenever a new post was added to my site. Growing the card deck in this manner with each post is simple in Jekyll, but placing the breakpoints correctly posed a challenge. My approach involved utilizing additional liquid tags and modulo mathematics.

Although this question may be outdated, I stumbled upon it and found it helpful. Perhaps someone else using Jekyll will find this information valuable in the future.

<div class = "container">
  <div class = "card-deck">

    {% for post in site.posts %}
      <div class = "card border-0 mt-2">
        <a href = "{{ post.url }}"><img src = "{{ site.baseurl }}{{ post.image }}" class = "mx-auto" alt = "..."></a>
        <div class = "card-body">
          <h5 class = "card-title"><a href = "{{ post.url }}">{{ post.title }}</a></h5>
          <span>Published: {{ post.date | date_to_long_string }} </span>
          <p class = "text-muted">{{ post.excerpt }}</p>
        </div>
        <div class = "card-footer bg-white border-0"><a href = "{{ post.url }}" class = "btn btn-primary">Read more</a></div>
      </div>

      <!-- Use modulo to add divs to handle break points -->
      
      <!-- Modulo calculations here -->
    
    {% endfor %}
  </div>
</div>

This block of code can be directly incorporated into a website or saved in your Jekyll project's _includes folder.