Margin between card with bootstrap-CodePudding

I have some card with bootstrap and I would like to have left margin...I would like the cards to be evenly distributed across the width. Basically, You can see that there is red on the right, and I wish there wasn't...

.azer {
  background: red;
}

.card-annuaire {
  background: green;
  border: 0;
  border-radius: 0;
  margin-right: 1rem;
}

.card-annuaire .card-body {
  text-align: center;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div >
  <div >
    <div >
      <div >
        <div >
          <div >
            <div >
              <div >
                <div >
                  <div >
                    <div ><img src="https://picsum.photos/100" />
                    </div>
                    <!-- /.card-text -->
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card  -->
              </div>
              <!-- /.col  -->
              <div >
                <div >
                  <div >
                    <div ><img src="https://picsum.photos/100" alt="pic" />
                    </div>
                    <!-- /.card-text -->
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card  -->
              </div>
              <!-- /.col  -->
              <div >
                <div >
                  <div >
                    <div ><img src="https://picsum.photos/100" />
                    </div>
                    <!-- /.card-text -->
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card  -->
              </div>
              <!-- /.col  -->
              <div >
                <div >
                  <div >
                    <div ><img src="https://picsum.photos/100" />
                    </div>
                    <!-- /.card-text -->
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card  -->
              </div>
              <!-- /.col  -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

You can see here:

CodePudding user response：

Remove the margin-right: 1rem; from the .card-annuaire class, and replace g-0 on your row class to gx-3. This adds gutters in between your cards

Edit: Check this link out for more info on how gutters work in bootstrap: Bootstrap Gutters

CodePudding user response：

Restore the column gutters
Make the cards full width
Place the red background on the row rather than a separate element

.azer {
  background: red;
}

.card-annuaire {
  width: 100%;
  background: green;
  border: 0;
  border-radius: 0;
  margin-right: 1rem;
}

.card-annuaire .card-body {
  text-align: center;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div >
  <div >
    <div >
      <div >
        <div >
          <div >
            <div >
              <div >
                <div >
                  <div ><img src="https://picsum.photos/100" />
                  </div>
                </div>
              </div>
            </div>

            <div >
              <div >
                <div >
                  <div ><img src="https://picsum.photos/100" alt="pic" />
                  </div>
                </div>
              </div>
            </div>

            <div >
              <div >
                <div >
                  <div ><img src="https://picsum.photos/100" />
                  </div>
                </div>
              </div>
            </div>

            <div >
              <div >
                <div >
                  <div ><img src="https://picsum.photos/100" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

You need to remove margin right from .card-annuaire Like this:

.card-annuaire {
      background:green;
            border:0;
            border-radius: 0;
            .card-body {
                text-align: center;
            }

Update

If you margin on both sides then you can do:

.card-annuaire {
      background:green;
            border:0;
            border-radius: 0;
            margin:0 1rem;
            .card-body {
                text-align: center;
            }

.azer {
  background: red;
}

.card-annuaire {
  background:green;
        border:0;
        border-radius: 0;
        margin:0 1rem;
        .card-body {
            text-align: center;
        }
    }

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div >
  <div >
    <div >
      <div  >
        <div >
          <div >
            <div >
              <div >
                <div >
                  <div >
                    <div ><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div >
                <div >
                  <div >
                    <div ><img src="https://picsum.photos/100" alt="pic" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div >
                <div >
                  <div >
                    <div ><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div >
                <div >
                  <div >
                    <div ><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>