Remove whitespace bootstrap

Question

Yes, I have looked at other questions, but failed to find any to help.

I am trying to align images so there are 3 on each row, but I noticed the whitespace is causing the issue.

What it looks like:

What it should look like:

HTML:

export default function Form() {
  return (
    // <----- MOBILE ---->

    <Container>
      <div className="mobile-logo-container d-block d-sm-none">
        <Row>
          <Col className="col-sm-11">
            <div className="mobile-card">
              <div className="mobile-card-body">
                <Row>
                  <Col>
                    <img
                      src={aviva}
                      alt="Aviva"
                      className="brand-logo"
                      height="75px"
                      width="75px"
                    />
                  </Col>
                  <Col>
                    <img
                      src={aig}
                      alt="American International Group"
                      className="brand-logo"
                      height="75px"
                      width="75px"
                    />
                  </Col>
                  <Col>
                    <img
                      src={lg}
                      alt="Legal and General"
                      className="brand-logo"
                      height="75px"
                      width="75px"
                    />
                  </Col>
                </Row>
                <Row>
                  <Col>
                    <img
                      src={rl}
                      alt="Royal London"
                      className="brand-logo"
                      height="75px"
                      width="75px"
                    />
                  </Col>
                  <Col>
                    <img
                      src={zurich}
                      alt="Zurich"
                      className="brand-logo"
                      height="75px"
                      width="75px"
                    />
                  </Col>
                  <Col>
                    <img
                      src={lv}
                      alt="London Victoria"
                      className="brand-logo"
                      height="75px"
                      width="75px"
                    />
                  </Col>
                </Row>
              </div>
            </div>
          </Col>
        </Row>
      </div>
    </Container>
  )
}

I have defined col-sm-11 so to me it should have worked correctly because it's wrapping all the other columns/images. I have tried removing the gutter, padding and margin but this does not change.

Answer 1

I think you should use col-4 to split up a row into thirds as a third of 12 is 4.

Is the below example what you are trying to achieve?

.row{
    width: 40%;
    margin: 1rem 0;
}

.box{
    width: 50px;
    height: 50px;
    padding: 1rem;
}

.green{
    background-color: green;
}
.red{
    background-color: red;
}
.blue{
    background-color: blue;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    
    <div class="row">
        <div class="col-4">
            <div class="box green"></div>
        </div>
        <div class="col-4">
            <div class="box green"></div>
        </div>
        <div class="col-4">
            <div class="box red"></div>
        </div>
    </div>
        <div class="row">
        <div class="col-4">
            <div class="box green"></div>
        </div>
        <div class="col-4">
            <div class="box blue"></div>
        </div>
        <div class="col-4">
            <div class="box green"></div>
        </div>
    </div>
        <div class="row">
        <div class="col-4">
            <div class="box blue"></div>
        </div>
        <div class="col-4">
            <div class="box red"></div>
        </div>
        <div class="col-4">
            <div class="box green"></div>
        </div>
    </div>
    
</div>