Is there an efficient method to create a square card or div using Bootstrap flexboxes with minimal custom CSS and/or utilizing built-in Bootstrap properties if feasible?
My aim is to achieve a responsive square positioned in the center of this card, based on the minimum width or height of its parent element with some margin.
Essentially, the square would have dimensions NxN where
N = Math.min(parentWidth, parentHeight) - (marginSize * 2);
https://i.sstatic.net/o7dDY.png
This is my current setup
<div class="d-flex flex-column min-vh-100">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a href="#home" class="navbar-brand">url.com</a>
</nav>
<div class="card m-5 h-100 flex-grow-1 rounded-0">
<div class="card small-cards m-5 h-100 flex-grow-1 rounded-0 border-0">I WANT THIS TO BE SQUARE :)</div>
</div>
</div>