title: Bootstrap 4 Cards of same height in columns
body: <p>I'm currently working on Cards from Bootstrap.</p>
  
  <p>Depending on the text title I will get the different height for the cards and would like to have the same height as the tallest one.</p>
  
  <p>I don't mind using JS I actually think is probably the best way to approach the problem.</p>
  
  <p>I have tried using different solutions from the CSS like using flexbox.</p>
  
  <p>The rendered HTML as it is rendered dynamically here's a simple example:</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-css lang-css prettyprint-override"><code>.card {
    float: left;
    width: 100%;
    padding: .75rem;
    margin-bottom: 2rem;
    border: 0;
    box-shadow: 0px 0px 8px 0.3px rgba(0, 0, 0, 1);
  }
  
  .card&gt;img {
    margin-bottom: .75rem;
    display: block;
    width: 80%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  
  .card-text {
    font-size: 85%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="Content-type" content="text/html; charset=UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;SMITE FR&lt;/title&gt;
    &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;link href="css/album.css" rel="stylesheet"&gt;
    &lt;link href="css/ie10-viewport-bug-workaround.min.css" rel="stylesheet"&gt;
    &lt;script src="https://www.w3schools.com/lib/w3data.js"&gt;&lt;/script&gt;
    &lt;link rel="import" href="navigation.html"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="card-deck"&gt;
          &lt;div class="col-md-4 col-sm-6 col-12"&gt;
            &lt;div class="card"&gt;
              &lt;img src="images/dieux/Agni.jpg" alt="BeatsX"&gt;
              &lt;h1 class="card-title"&gt;BeatsX&lt;/h1&gt;
              &lt;div class="text-center"&gt;
                &lt;p&gt;1188.0000&lt;/p&gt;
                &lt;p&gt;2017-06-09 10:00:00&lt;/p&gt;
                &lt;a href="god.php?ID=2" target="_blank" class="btn btn-primary"&gt;Voir la Fiche&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4 col-sm-6 col-12"&gt;
            &lt;div class="card"&gt;
              &lt;img src="images/dieux/Agni.jpg" alt="Nitendo Switch"&gt;
              &lt;h1 class="card-title"&gt;Nitendo Switch&lt;/h1&gt;
              &lt;div class="text-center"&gt;
                &lt;p&gt;2899.0000&lt;/p&gt;
                &lt;p&gt;2017-06-10 10:00:00&lt;/p&gt;
                &lt;a href="god.php?ID=3" target="_blank" class="btn btn-primary"&gt;Voir la Fiche&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4 col-sm-6 col-12"&gt;
            &lt;div class="card"&gt;
              &lt;img src="images/dieux/Agni.jpg" alt="iPhone 7 128GB (Jet Blakc)"&gt;
              &lt;h1 class="card-title"&gt;iPhone 7 128GB (Jet Blakc)&lt;/h1&gt;
              &lt;div class="text-center"&gt;
                &lt;p&gt;6388.0000&lt;/p&gt;
                &lt;p&gt;2017-06-06 10:00:00&lt;/p&gt;
                &lt;a href="god.php?ID=1" target="_blank" class="btn btn-primary"&gt;Voir la Fiche&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>