Bootstrap text and image-CodePudding

Im using bootstrap and have a row that contains 2 divs. The first div contains an image and the 2nd div contains the text.

I want the text to butt up to the edge of the image, but the image doesn't fill the entire div, but if I make the div smaller the image is scaled and causes the same problem.

But divs are col-xl-6 but the image is centered leaving a gap around the sides and therefore a space between the end of the image and the start of the text.

<div >
    <div >
            <div >
                <div ><img src="{{ project.image.url}}" alt="img" ></div>
            </div>  
    </div>
    <div >
        <div >
<label >{{project.name}}</label>
            <h6 >Description</h6>
            <p>{{project.description}}</p>
        </div>
    </div>
</div>

Hope this makes sense?

Thanks

CodePudding user response：

Remove the inner columns from each column, too many columns inside columns.

<div >
    <div >
        <div ><img src="{{ project.image.url}}" alt="img" ></div>
    </div>
    <div >
        <label >{{project.name}}</label>
        <h6 >Description</h6>
        <p>{{project.description}}</p>
    </div>
</div>