Profile cards

Bootstrap 4 has more powerful components than the previous version 3. Undoubtedly card component is one of the stylish and mobile friendly one among others. Basically you can mix and match the cards to create different types of widgets. In this article let us discuss, how to create a Bootstrap 4 user profile card widget.

Profile Card
image
Tanislav Robert
Follow

Some quick example text to build on the card title and make up the bulk of the card's content.

                                                        
<!-- Profile Card -->
<div class="profile-card">
    <div class="card shadow-sm text-center border-light">
        <div class="profile-cover" data-background="/img/team/cover-profile-2.jpg"></div>
        <div class="profile-image-small mt-n6">
            <img src="../../img/team/9.jpg" class="card-img-top organic-radius" alt="image">
        </div>    
        <div class="card-body">
            <h5 class="card-title mb-0">Tanislav Robert</h5>
            <a class="btn btn-sm btn-secondary my-3" href="#">
                    <span class="fas fa-user-plus mr-1"></span>
                    Follow 
                </a>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <ul class="social-buttons py-3">
                <li>
                    <a href="#" target="_blank" class="btn btn-link btn-facebook">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" class="btn btn-link btn-twitter">
                        <i class="fab fa-twitter"></i>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" class="btn btn-link btn-slack">
                        <i class="fab fa-slack-hash"></i>
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank" class="btn btn-link btn-google-plus">
                        <i class="fab fa-google-plus"></i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- End of Profile Card -->