I am attempting to incorporate a custom file selection feature within a Bootstrap card:
Here is my attempt:
<style>
label {
cursor: pointer;
}
.custom-input-image {
opacity: 0;
position: absolute;
z-index: -1;
}
</style>
<div class="row mb-2">
<div class="col-md-4 text-center">
<input type="file" id="id_img_1" name="id_img_1" class="custom-input-image">
<label for="id_img_1" class="hover-shadow-lg hover-translate-y-n3">
<div class="card">
<div class="card-body text-center">
<!-- Image content-->
<div>
<div>
<h4 class="mb-1"><i class="camera-icon"></i></h4>
<small>Select file...</small>
</div>
</div>
</div>
</div>
</label>
</div>
[...more cards..]
</div>
With the current setup, I achieve the following effect: https://i.sstatic.net/wnd2N.png
However, I am aiming for this look: https://i.sstatic.net/kegBY.png
When adding a label to the card, it causes the card to shrink. How can I make sure the card retains its full length despite the file selection addition?