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

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 class="list-group-item d-flex flex-row">
    <div class="flex-column">
      <h4>A Test Recipe</h4>
      <p>This is simply a test</p>
    </div>

    <div class="flex-row align-self-center justify-content-end">
      <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?

htmlcssbootstrap-4flexbox


Solution 1:[1]

try this.

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

<div class="list-group-item d-flex justify-content-center align-items-center flex-wrap">
    <div class="card m-3 border-0" style="max-width: 350px;">
        <div class="row g-0">
            <div class="col-5">
                <img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
                     class="img-fluid rounded-3"
                     alt="A Test Recipe">
            </div>
            <div class="col-7">
                <div class="card-body">
                    <h5 class="card-title">A Test Recipe </h5>
                    <p class="card-text">This is simply a test.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Solution 2:[2]

?

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

<div class="list-group-item d-flex justify-content-center align-items-center flex-wrap">
    <div class="card m-3 border-0" style="max-width: 250px;">
        <div class="row g-0">
            <div class="col-5">
                <img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
                     class="img-fluid rounded-5"
                     alt="A Test Recipe">
            </div>
            <div class="col-7">
                <div class="card-body">
                    <h5 class="card-title">A Test Recipe </h5>
                    <p class="card-text">This is simply a test.</p>
                </div>
            </div>
        </div>
    </div>
</div>

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 Hamada Elbanoby

Related Questions