title: How can I align links to the bottom in grid column?
body: <p>I've a web page that displays a list of items using bootstrap 5 grid.  Each column in the grid contains one item, and each item will have an Edit link.  I'm wanting the Edit link to be positioned at the bottom of the column.  I've tried align-bottom and bottom-0.  But none of them work. In the example below, you should see that the Edit link on the second column is not at the bottom of that column.  What am I doing wrong? (I've also tried position-absolute)</p>
  <p><a href="https://jsfiddle.net/hockchailim/5mgfkoLc/2/" rel="nofollow noreferrer">https://jsfiddle.net/hockchailim/5mgfkoLc/2/</a></p>
  <pre><code>    &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col p-3 rounded border text-center&quot;&gt;
              &lt;div class=&quot;fw-bolder&quot;&gt;
                  Item 1
              &lt;/div&gt;
              &lt;div&gt;
                  Desc Line 1
              &lt;/div&gt;
              &lt;div&gt;
                  Desc Line 2
              &lt;/div&gt;
              &lt;div&gt;
                  Desc Line 3
              &lt;/div&gt;
              &lt;a href=&quot;http://localhost:8000/products/1/edit&quot; class=&quot;align-bottom&quot;&gt;Edit&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col p-3 rounded border text-center&quot;&gt;
              &lt;div class=&quot;fw-bolder&quot;&gt;
                  Item 2
              &lt;/div&gt;
              &lt;div&gt;
                  Desc Line 1
              &lt;/div&gt;
  
              &lt;a href=&quot;http://localhost:8000/products/2/edit&quot; class=&quot;align-bottom&quot;&gt;Edit&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>