title: Vertical align text in Bootstrap card
body: <p>I have the following card, I am trying to vertically center align the text &quot;Light card title&quot;, I have added <code>align-middle</code> but it does not have an effect. How can the text be vertically center aligned?</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;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
                  &lt;div class="card bg-light mb-3" style="max-width: 18rem;;"&gt;
                      &lt;div class="card-header"&gt;Total Views&lt;/div&gt;
                      &lt;div class="card-body" style=" height:150px"&gt;
                          &lt;h5 class="card-title text-center align-middle"&gt;Light
                              card title&lt;/h5&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>