Css Flex ( BootStrap row )

Issue

How do i add spacing between the 4 div's in the below image

here as you can see 4 div's aligned next to one another

the code for the single div's is :

<div class="col-lg-3 col-md-4 col-sm-6 mb-5 text-center">....</div>

and the parent for these div's is :

<div class="d-flex row mx-auto" style={{ justifyContent: "space-around",alignContent:'center' }}>
....
</div>

The Full Tree is :

<div className="container mt-5 mb-5">
    <div class="d-flex row mx-auto" style={{ justifyContent: "space-around",alignContent:'center' }}>
        <div class="col-lg-3 col-md-4 col-sm-6 mb-5 text-center">
         ....
         ....
        </div>
    </div>
</div>

Solution

Did you try adding margin to individual divs?

<div class="col-lg-3 col-md-4 col-sm-6 mb-5 text-center" style="margin: 10px">....</div>

Once it works, you can later extend to a custom class.

.spacing {
  margin: 10px;
}


<div class="col-lg-3 col-md-4 col-sm-6 mb-5 text-center spacing">....</div>

Answered By - TheResolver