Q: how to make Font Awesome icon stretched horizontally with the message box and added picture to be into an uniform circle as design (bootstrap)? I am meeting 2 problems and here they are. First, i followed my tutorial and the pictures are not as uniform as design.
As you can see in these pictures. The first is my tutorial and the second is my coded.


My second problem is, when I coded, the font awesome icon does not stretch as expected. As you can see in the third picture is the tutorial the the fourth is what I got


So, my question is, first, how can I make the photos to be into an uniform circle as design ? And my second question is, how can I make Font Awesome icon stretched horizontally with the message box ?
I am coding these by bootstrap 5
Here is my code
https://github.com/nguyencuc2586/project2.3

Thank you in advance!

A: Please checkout code blow. it's maybe help you.


.img-box {
            width:  100px;
            height:  100px;
            display:  inline-block;
            vertical-align:  top;
        marg
        }
        .img-box img {
            width:  100%;
            height: 100%;
            object-fit: cover;
            border-radius:  50%;
        }
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

    
</head>

<body>
    <div class="container">
        <div class="row g-3">
            <div class="col-6 col-lg-3">
                <div class="card">
                    <div class="card-body text-center">
                        <div class="img-box mb-3">
                            <img src="https://images.unsplash.com/photo-1664575198263-269a022d6e14?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" title="" alt="">
                        </div>
                        <h6>Card Heading</h6>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
                    </div>
                </div>
            </div>

            <div class="col-6 col-lg-3">
                <div class="card">
                    <div class="card-body text-center">
                        <div class="img-box mb-3">
                            <img src="https://images.unsplash.com/photo-1670747375356-6efaa71ec623?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" title="" alt="">
                        </div>
                        <h6>Card Heading</h6>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
                    </div>
                </div>
            </div>


            <div class="col-6 col-lg-3">
                <div class="card">
                    <div class="card-body text-center">
                        <div class="img-box mb-3">
                            <img src="https://images.unsplash.com/photo-1670787053502-ad4b741ef37a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" title="" alt="">
                        </div>
                        <h6>Card Heading</h6>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
                    </div>
                </div>
            </div>

            <div class="col-6 col-lg-3">
                <div class="card">
                    <div class="card-body text-center">
                        <div class="img-box mb-3">
                            <img src="https://images.unsplash.com/photo-1670777361177-7ea502ee059d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" title="" alt="">
                        </div>
                        <h6>Card Heading</h6>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>


