Bootstrap 5 justify-content not working correctly and cannot vertically center content-CodePudding

I have the following piece of code and I am use bootstrap 5:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<br><br>

<div >
    <div >
      <h4>A Test Recipe</h4>
      <p>This is simply a test</p>
    </div>

    <div >
      <img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
           alt="A Test Recipe"
           style="max-height: 50px !important">
    </div>
</div>

I'm trying to get the image to the end of list-group-item div. I tried using justify-content-end but this has no effect. I also tried align-self-end this also doesn't bring the image to the right side.

And as for the div with the flex-column class I'm trying to vertically center its content. But it's not working either, it should be centered like the image is. I got the image vertically centered by making use of the align-self-center class. However when I apply this class to the div that has flex-column class it doesn't work.

What am I doing wrong?

CodePudding user response：

try this.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<br><br>

<div >
    <div  style="max-width: 350px;">
        <div >
            <div >
                <img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
                     
                     alt="A Test Recipe">
            </div>
            <div >
                <div >
                    <h5 >A Test Recipe </h5>
                    <p >This is simply a test.</p>
                </div>
            </div>
        </div>
    </div>
</div>

CodePudding user response：

<linkhref="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div >
    <div  style="max-width: 250px;">
        <div >
            <div >
                <img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
                     
                     alt="A Test Recipe">
            </div>
            <div >
                <div >
                    <h5 >A Test Recipe </h5>
                    <p >This is simply a test.</p>
                </div>
            </div>
        </div>
    </div>
</div>