Bootstrap responsive image with CTA in grid

Using Bootstrap 5. I have the following:

<div class="row flex-row flex-nowrap overflow-auto g-0 align-items-center my-cards">
    <div class="col-5 col-md-2 me-3" data-card-id="25">
      <img class="img-fluid rounded" src="56ba4956ac082d3c3b038a2542c8e756.png">
    </div>
    <div class="col-5 col-md-2 me-3" data-card-id="35">
      <img class="img-fluid rounded" src="9ca7688e7dd342bcd3669b4281107df3.png">
    </div>
    <div class="col-5 col-md-2 me-3" data-card-id="24">
      <img class="img-fluid rounded" src="ff2ca738f2463d1a8db77224fd27a1b6.png">
    </div>
    <div class="col-5 col-md-2 me-3" data-card-id="2">
      <img class="img-fluid rounded" src="5fa69e886f502187e8a66aeeb3be6573.png">
    </div>
    <div class="col-5 col-md-2 me-3" data-card-id="13">
      <img class="img-fluid rounded" src="74409b63ea174d76157c97198afadd55.png">
    </div>
  <div class="col-5 col-md-2 rounded text-center" style="border: 4px dashed #ddd">
    <button type="button" class="btn btn-link text-decoration-none text-muted" data-bs-toggle="modal" data-bs-target="#manage_cards">
      <i class="fas fa-fw fa-plus-circle"></i> Add card
    </button>
  </div>
</div>

Here is the current view:

Desktop

enter image description here

Mobile

enter image description here

Note the image size is fluid. Images all have original dimension 360x225px.

Problem The image size are different because it's responsive with class img-fluid, so I have set it to look bigger on mobile with col-5 and smaller with col-md-2 on desktop. There is this button called "Add Card", which I want it to be same size as the image in terms of height and width, with or without image present, which means there could be time when there is no image, and it's just "Add Card".

Of course right now the "Add Card" button is small and not as big as card in terms of padding, height and width. How do I make "Add Card" as responsive, same size as other images?



Read more here: https://stackoverflow.com/questions/68468394/bootstrap-responsive-image-with-cta-in-grid

Content Attribution

This content was originally published by Victor at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: