title: bootstrap card header - same height for all
body: <p>I'm using bootstrap cards on two web-pages. On one page, the header-text is fixed so I can use min-height to match their card-header height. On the second page, those cards will be generated so I won't know the text length and the words. I want the card-header to be the same height for all in a row.</p>
  <p>Is there any way to calculate min-height based on the biggest card-header withing a row?</p>
  <p>I'm already using card-deck. As far as I know this is for the height of the whole card, my issue here is the card-header. The cards in general all have the same height.</p>
  <p><a href="https://i.stack.imgur.com/95cH6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/95cH6.png" alt="enter image description here" /></a></p>
  <p>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-html lang-html prettyprint-override"><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
        &lt;title&gt;Bootstrap Example&lt;/title&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
        &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
       
      &lt;div class="container"&gt;
              &lt;div class="card-deck my-3 text-center"&gt;
                  &lt;div class="card mb-4 box-shadow"&gt;
                      &lt;div class="card-header align-items-center d-flex
                  justify-content-center card-header-height"&gt;
                          &lt;h4 class="my-0 font-weight-normal"&gt;Lorem Ipsum Lorem Ipsum Lorem Ipsum Ipsum&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="card-image"&gt;
                          &lt;img class="img-fluid" src="img_avatar1.png"&gt;
                      &lt;/div&gt;
                      &lt;div class="card-body"&gt;
                          &lt;ul class="list-unstyled mt-3 mb-4"&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="card mb-4 box-shadow"&gt;
                      &lt;div class="card-header align-items-center d-flex
                  justify-content-center card-header-height"&gt;
                          &lt;h4 class="my-0 font-weight-normal"&gt;Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum &lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="card-image"&gt;
                          &lt;img class="img-fluid" src="img_avatar1.png"&gt;
                      &lt;/div&gt;
                      &lt;div class="card-body"&gt;
                          &lt;ul class="list-unstyled mt-3 mb-4"&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="card mb-4 box-shadow"&gt;
                      &lt;div class="card-header align-items-center d-flex
                  justify-content-center card-header-height"&gt;
                          &lt;h4 class="my-0 font-weight-normal"&gt;Lorem Ipsum Lorem Ipsum &lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="card-image"&gt;
                          &lt;img class="img-fluid" src="img_avatar1.png"&gt;
                      &lt;/div&gt;
                      &lt;div class="card-body"&gt;
                          &lt;ul class="list-unstyled mt-3 mb-4"&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Update</strong>
  I had the same issue after adding a list (ul) and list-items (li) into the card-body. Took me some hours to figure out why the card-header height doesn't work anymore then. <strong>Make sure your li text is similar in length. One of my li was too long so it was 2-lines which screws the overall look</strong> of the card-headers again.</p>