Is there an *elegant* solution to create a sq. card / div utilizing bootstrap flexboxes with minimal customized css and/or utilizing built-in bootstrap properties if in any respect doable?

My objective is to get this responsive sq. in the course of this card based mostly on the minimal width or peak of the doms mum or dad with some margin

so mainly the sq. can be of dimension NxN the place

N = Math.min(parentWidth, parentHeight) - (marginSize * 2);

That is what I’ve


<div class="d-flex flex-column min-vh-100">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a href="#dwelling" class="navbar-brand">url.com</a>
    <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>

I am doing this undertaking in react, and wish to keep away from doing customized css as a lot as doable 🙂

I think about quite a lot of you hate bootstrap and are precise entrance finish devs right here, I am sorry 🙁

Moreover, if you would like to reply this on StackOverflow and get some factors on there be happy lol https://stackoverflow.com/questions/66713076/creating-a-square-flexbox-based-on-the-smallest-width-height-of-parent-dom-usi

Source link

Sharing is caring!

Related Posts

Leave a Reply