How do I get rid of the white spaces on both sides of an image?

Issue

I’m trying to get rid of the empty space around an image, which is inside of a bootstrap column.

I’ve managed to fix the problem on desktop using -1rem on the left and right margins. I’ve tried setting body margin and padding to 0, as well as messing with the fluid bootstrap settings for the container, row, and image.

The JSX/HTML.

<React.Fragment>
    <div className="conatiner-fluid bg">
        <div className="row"
            <div className="col-lg-6 col-md-6 col-sm-12">
                <img classname="img-fluid" src={...}></img>
            </div>
            <div className="rightSide col-lg-6 col-md-6 col-sm-12 mt-5 text- 
             centered">
                <h1 className="display-4 text-center">Hello, world!</h1>
                <p className="lead">More text</p>
                <p>even more text</p>
            </div>
        </div>
    </div>
</React.Fragment>

The CSS.

.rightSide {
    background: black;
    color:white;
.bg {
    background: black;

.img-fluid {
    margin-right: -1rem;
    margin-left: -1rem;
}

The issue I’m having now is fixing the look on mobile. It’s now hugging the left side of the page with a large empty space on the right. The image is 960×1080. Any help or even suggestions are greatly appreciated. Thanks!

EDIT: Adding p-0 to the image’s div container and then getting rid of the -1rem on the left and right margin fixed the issue. Another problem was that there were some global naming issues using img-fluid as the targeted CSS tag.

Old:

<div className="col-lg-6 col-md-6 col-sm-12">
    <img classname="img-fluid" src={...}></img>
</div>
.img-fluid {
    margin-right: -1rem;
    margin-left: -1rem;
}

New:

<div className="col-lg-6 col-md-6 col-sm-12 p-0">
    <img classname="img-fluid" src={...}></img>
</div>

.img-fluid {
    margin-right: -1rem;
    margin-left: -1rem;
}

Solution

G-Cyr was correct. p-0 on the container div and getting rid of the -1rem on the left and right margins fixed the issue with the padding on the image. The other styling issues were caused by the naming of the CSS stylings. img-fluid was being manipulated on another file as well. Gotta learn better naming habits lol. Thank you G-Cyr!

Answered By – TJ Brackett

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.