Add spaces between columns without losing the grid system layout

Question

I want to add spaces between columns without losing the grid system layout , when I add margin to the card the layout become 3 cards not 4

here is the code , the problem is that i can't control the spacing between cards and it should be four cards in every row

 <div class ="container">
  <div class ="row">
    <div class ="d-flex flex-wrap">
        <div class ="card p-0 col-12 col-lg-3">
           <img src = "#">
           [i write the title here]<p> .... </p>
        </div>
         <div class ="card p-0 col-12 col-lg-3">
           <img src = "#">
           <p> .... </p>
        </div>
        <div class ="card p-0 col-12 col-lg-3">
           <img src = "#">
           <p> .... </p>
        </div>
        <div class ="card p-0 col-12 col-lg-3">
           <img src = "#">
           <p> .... </p>
        </div>
    </div>
  </div>
 </div>

<style>
.card img{
width:100%;
}
..card p{
width:100%;
color : green;
font-size :18px;
float:right
}
</style>

Please click edit, then `[<>]` snippet editor and create a [mcve] with css and relevant script — mplungjan, Jun 17 '20 at 12:55
You are sort of using two grid systems... the `row`, `col-12` and the flex-utilities like `d-flex`. I think maybe you want to drop the flex utilities - the bootstrap grid system is built on flex, so putting the utility classes in there could muck things up. I'd remove utilities before you spend time working out the margin issue. — arbuthnott, Jun 17 '20 at 13:00

score 1 · Answer 1 · answered Jun 17 '20 at 13:06

Since we can't see all your CSS, I don't know if this is for sure, but try using grid-row-gap and grid-column-gap for the spacing between the rows and the spacing between the columns. You can also use grid-template-columns to specify how many columns you want.

Hope this helps!! Tilier

score 1 · Accepted Answer · edited Dec 07 '20 at 10:28

Similar questions have been asked before:

Spacing & sizing columns using Bootstrap 4
Bootstrap: add margin/padding space between columns

Adjust the spacing by adjusting the padding. Also, card should be inside columns and columns are always inside row. For example, here px-4 increases the spacing:

<div class="row">  
    <div class="col-12 col-lg-3">
        <div class="card">
            <img src="#"> [i write the title here]<p> .... </p>
        </div>
    </div>
    <div class="px-4 col-12 col-lg-3">
        <div class="card">
            <img src="#">
            <p> .... </p>
        </div>
    </div>
    <div class="px-4 col-12 col-lg-3">
        <div class="card">
            <img src="#">
            <p> .... </p>
        </div>
    </div>
    <div class="col-12 col-lg-3">
        <div class="card">
            <img src="#">
            <p> .... </p>
        </div>
    </div>
</div>

Demo

Add spaces between columns without losing the grid system layout

2 Answers2

Linked