title: Bootstrap 5 aligning image inside a column to the bottom
body: <p>I want to ask a question about aligning an image inside of a column to the bottom in Bootstrap 5.</p>
  <p>Below is a HTML snippet using Bootstrap 5's CDN to create two columns, each containing an image of London, with <code>img-fluid</code> attached to get <code>max-width:100%</code> and <code>height: auto</code>:</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&gt;
      &lt;head&gt;
          &lt;title&gt;Column img align-bottom demo&lt;/title&gt;
          &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;h2&gt;Column img align-bottom demo&lt;/h2&gt;
              &lt;div class="row g-2"&gt;
                  &lt;div class="col-md border"&gt;
                      &lt;img src="https://static.homesandproperty.co.uk/s3fs-public/thumbnails/image/2020/11/19/10/HotNotGoodLuckHope.jpg?width=990&amp;auto=webp&amp;quality=75&amp;crop=968%3A645%2Csmart" class="img-fluid"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md border"&gt;
                      &lt;img src="https://london.ac.uk/sites/default/files/styles/max_1300x1300/public/2018-10/london-aerial-cityscape-river-thames_1.jpg?itok=6LenFxuz" class="img-fluid" alt=""&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>As you can see, the right hand side photo is aligned to the top of the column whereas I want it to be aligned to the <em>bottom</em> of the column.</p>
  <p><a href="https://i.stack.imgur.com/I06Zl.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I06Zl.jpg" alt="Screenshot showing RHS aligned to the top of the column, rather than the bottom" /></a></p>
  <p>I have tried the following solution via the <a href="https://getbootstrap.com/docs/5.0/utilities/vertical-align/" rel="nofollow noreferrer">Bootstrap Vertical Align Documentation</a> by adding <code>align-bottom</code> to the image class itself (images sourced on a Creative Commons licence for educational purposes):</p>
  <pre><code>&lt;div class=&quot;col-md border&quot;&gt;
      &lt;img src=&quot;https://london.ac.uk/sites/default/files/styles/max_1300x1300/public/2018-10/london-aerial-cityscape-river-thames_1.jpg?itok=6LenFxuz&quot; class=&quot;img-fluid align-bottom&quot; alt=&quot;&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  <p>but this does not work.</p>
  <p>How can I push the right-hand side image to align it to the bottom of the parent div?</p>