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

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 960x1080. 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;
}

htmlcssreactjsmobilebootstrap-4


Solution 1:[1]

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!

Solution 2:[2]

* {
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
}

.rightSide {
    color:white;
}

.bg {
    background: black;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <section class="bg">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12">
          <img class="img-fluid" src=https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png>
      </div>
      <div class="rightSide col-lg-6 col-md-6 col-sm-12 pt-5 text- 
                  centered">
        <h1 class="display-4 text-center">Hello, world!</h1>
        <p class="lead">More text</p>
        <p>even more text</p>
      </div>
    </div>
    </div>
  </section>
  
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Try this out! Hope it'll help

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 nazifa rashid

Related Questions