Employee Profile Card

<div class="main-body d-flex justify-content-center align-items-center vh-100">
        <div class="card text-center border-0 shadow-sm py-4">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-auto">
                        <img src="https://mdbootstrap.com/img/new/standard/nature/111.webp" class="rounded-circle border p-1" alt="Profile Image" width="125" height="125">
                    </div>
                </div>
            </div>
            <h5 class="card-title mt-3">Manuella Nevoresky</h5>
            <p class="card-text text-body-secondary">CEO - FOUNDER</p>
            <div class="d-flex justify-content-center">
                <a href="#"><i class="border rounded-circle icon fab fa-facebook-f m-2 p-2"></i></a>
                <a href="#"><i class="border rounded-circle icon fab fa-twitter m-2 p-2"></i></a>
                <a href="#"><i class="border rounded-circle icon fab fa-instagram m-2 p-2"></i></a>
                <a href="#"><i class="border rounded-circle icon fab fa-linkedin-in m-2 p-2"></i></a>
            </div>
        </div>
</div>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>

.main-body{
background-color: rgb(248, 248, 248);
}
.card {
  			width: 20rem;
}
.card-text {
            font-size: 12px;
        }
        .icon{
            width: 34px;
            height: 34px;
        }

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css

Copy CDN

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css

Copy CDN

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js

Copy CDN

BootStrap 5

Classic Team Member Card

AdBlock Detected!