title: how to use bootstrap card columns properly?
body: <p>I have an angularjs webpage with bootstrap. I'm trying to use bootstrap cards. I selected bootstrap card-columns class but i got a problem. In adding fourth one, sequance will change to <code>card-colums: 2</code> but its default <code>card-colums: 3</code>.</p>
  
  <p>At JSFiddle <a href="https://jsfiddle.net/fdbwyoc7" rel="nofollow noreferrer">https://jsfiddle.net/fdbwyoc7</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module("app", []).controller("bdCtrl", function($scope) {
    $scope.cards = [{}];
    $scope.appendCard = function() {
      $scope.cards.push({});
    };
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"&gt;&lt;/script&gt;
  &lt;body ng-app="app" ng-controller="bdCtrl"&gt;
    &lt;button class="btn btn-warning" ng-click="appendCard()"&gt;Add new&lt;/button&gt;
    &lt;br&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="card-columns" style="column-count: 3;"&gt;
        &lt;div class="card" ng-repeat="rd in cards"&gt;
          &lt;img class="card-img-top" src="https://www.direnc.net//3d-printer-prusa-i-3-demonte-3d-printer-eitleri-china-19324-99-O.jpg" alt="Card image cap"&gt;
          &lt;div class="card-body"&gt;
            &lt;h5 class="card-title"&gt;Card title&lt;/h5&gt;
            &lt;p class="card-text"&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
            &lt;p class="card-text"&gt;&lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>