CODEWITHSUNDEEP
htmlcssbootstrap-4react-bootstrap
K94
K94

Reputation: 39

Remove whitespace to the right of image

I am using Bootstrap with React. I have images that are producing whitespace to the right.

see here

But I have inspected the elements and can't seem to remove this. I have looked online about Bootstrap Col but still can't spot the issue. I don't have any CSS related to the Col or img, but I have tried padding-right: 0px !important and margin-right: 0px

HTML:

 <Container>
      <Row>
        <Col>
          <div className="form-border">
            <div className="form-box">
              <h1 className="form-title">Compare Cheap Life Insurance</h1>
                <Row className="logo-border">
                  <Col className="logo-col">
                    <img src={aviva} alt="aviva" className="brand-logo" height="75px" width="75px" />
                  </Col>
                  <Col className="logo-col">
                    <img src={aig} alt="aig" className="brand-logo" height="75px" width="75px"/>
                  </Col>
                </Row>
            </div>
          </div>
        </Col>
      </Row>
    </Container>

Any help would be appreciated. :)

https://codesandbox.io/s/little-field-xtr48?from-embed

Upvotes: 1

Views: 141

Answers (2)

Vishnu Vinod
Vishnu Vinod

Reputation: 765

This is because if you nest your image inside two col, then these two cols will divide the parent row by half the width and first col will occupy half of the whole width. So the best way to remove the right space is to nest that two images inside the same col itself like the following.

<Container>
      <Row>
        <Col>
          <div className="form-border">
            <div className="form-box">
              <h1 className="form-title">Compare Cheap Life Insurance</h1>
              <Row className="logo-border">
                <Col className="logo-col">
                  <img
                    src={aviva}
                    alt="aviva"
                    className="brand-logo"
                    height="75px"
                    width="75px"
                  />
                  <img
                    src={aig}
                    alt="aig"
                    className="brand-logo"
                    height="75px"
                    width="75px"
                  />
                </Col>
              </Row>
            </div>
          </div>
        </Col>
      </Row>
    </Container>

Upvotes: 1

Amaresh S M
Amaresh S M

Reputation: 3010

Add pr-0 class to remove white space right of the image. pr-0- sets the padding-right value to 0

Ref: bootstrap spacing

<Col className="logo-col pr-0">
<img src={aviva} alt="aviva" className="brand-logo" height="75px" width="75px" />
</Col>

Upvotes: 1

Related Questions