I am working on incorporating an image next to a div as seen in Facebook comments. Here is the HTML code I currently have:
<div className="row">
<div className="col-sm-1">
<img
className="img-thumbnail"
src="image.jpg" />
</div>
<div className="col-sm-11">
<div className="bg-light rounded p-1 pl-2">
<span className="font-weight-bold text-primary">content</span>
<div>
//buttons
</div>
</div>
</div>
</div>
However, I have noticed that there is some space left in the first div (col-sm-1) due to the smaller size of the image compared to the width allocated for the div. The issue can be visualized below. Does anyone have any suggestions on how to address this?
https://i.sstatic.net/AM1Nj.png
UPDATE
After attempting to use col-sm-auto, I realized that a space is always present from the right because of col-sm-11. This can be observed in the image provided: