User Profile Card in Bootstrap

HTML CSS JS Tidy

<div class="container mt-4 mb-4 p-3 d-flex justify-content-center">
    <div class="card p-4">
        <div class=" image d-flex flex-column justify-content-center align-items-center">
            <button class="btn btn-secondary profile"> <img src="https://cdn.pixabay.com/photo/2023/03/15/09/32/woman-7854120_1280.png" width="100" /></button> <span class="name mt-3">Suzy Bae</span> <span class="userName">@suzybae</span>
            <div class="d-flex flex-row justify-content-center align-items-center gap-2"> <span class="userID">i8907@ewrd-trd</span><i class="bi bi-copy"></i> </div>
<div class="gap-3 mt-3 icons d-flex flex-row justify-content-center align-items-center"> <i class="bi bi-twitter"></i> <i class="bi bi-facebook"></i><i class="bi bi-instagram"></i><i class="bi bi-linkedin"></i> </div>
            <div class="d-flex flex-row justify-content-center align-items-center mt-3"> <span class="number">12064 <span class="follow">Followers</span></span>
            </div>
            <div class=" d-flex mt-2">
                <button class="btn btn-dark">Edit Profile</button>
            </div>
            <div class="text mt-3"> <span>Bae Su-ji, better known by the stage name Bae Suzy or mononymously as Suzy, is a South Korean singer.</span> </div>
            <div class=" px-2 rounded mt-4 joinDate "> <span class="join">Joined May,2024</span> </div>
        </div>
    </div>
</div>

HTML CSS JS Tidy

User Profile Card in Bootstrap

>_Console

Leave a Comment Cancel reply

>_Console

File Setting

Code Playground Setting

Add External Stylesheets and Script

Leave a Comment Cancel reply