How can I remove the extra space around an image that is placed inside a bootstrap column?
On the desktop version, I was able to solve the issue by setting -1rem margins on the left and right. I tried adjusting the body margin and padding to 0, as well as experimenting with the fluid settings for the container, row, and image in Bootstrap.
Here is the JSX/HTML code:
<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>
And here is the CSS code:
.rightSide {
background: black;
color:white;
.bg {
background: black;
.img-fluid {
margin-right: -1rem;
margin-left: -1rem;
}
However, I am now facing an issue with the mobile version. The image is aligned to the left with a lot of empty space on the right. The image size is 960x1080. Any suggestions on how to fix this for mobile devices would be really helpful. Thank you!
UPDATE: Adding p-0 to the image's div container and removing the -1rem margins on the left and right resolved the problem. There were also some naming conflicts when using img-fluid as the CSS class.
Previously:
<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;
}
Updated version:
<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;
}