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.

Hover effect
image
Zoltan Szőgyényi
Web Developer

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-image">
    <div class="card">
        <img src="../../assets/img/team/team-2.jpg" class="card-img-top" alt="image">
        <div class="card-body mt-n5">
            <h5 class="card-title">Zoltan Szőgyényi</h5>
            <h6 class="card-subtitle">Web Developer</h6>
            <p class="card-text my-2">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 mt-4">
                <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 -->
                                                        
                                                    
Minimal

With the .rounded-circle and .organic-radius classes you can change the shape of the image.

image

Tanislav Robert

UI/UX Designer
image

Calota Oana

Web Developer
image

Tanislav Alex

Marketing
                                                        
<!-- Profile Card -->
<div class="profile-card-alternative rounded-circle text-center over-hide">
    <img src="../../assets/img/team/9.jpg" alt="image">
    <div class="team-mask bg-white d-flex align-items-center">
        <h4>Tanislav Robert</h4>
        <h6 class="card-subtitle mt-n5">UI/UX Designer</h6>
        <ul class="social-buttons">
            <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>
<!-- End of Profile Card -->

<!-- Profile Card -->
<div class="profile-card-alternative organic-radius text-center over-hide">
    <img src="../../assets/img/team/10.jpg" alt="image">
    <div class="team-mask bg-white d-flex align-items-center">
        <h4>Calota Oana</h4>
        <h6 class="card-subtitle mt-n5">Web Developer</h6>
        <ul class="social-buttons">
            <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>
<!-- End of Profile Card -->

<!-- Profile Card -->
<div class="profile-card-alternative text-center over-hide">
    <img src="../../assets/img/team/8.jpg" alt="image">
    <div class="team-mask bg-white d-flex align-items-center">
        <h4>Tanislav Alex</h4>
        <h6 class="card-subtitle mt-n5">Marketing</h6>
        <ul class="social-buttons">
            <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>
<!-- End of Profile Card -->
                                                        
                                                    
Rotating card

Card flipping card is a card animation that gives an element effect of flipping to the other side upon the interaction.

image
Robert Tanislav
UI/UX Designer
UI/UX Designer

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

Follow
                                                        
<!-- Profile Card -->
<div class="rotating-card-container">
    <div class="card shadow-sm border-light p-5 card-rotate">
        <div class="front text-center">
            <div class="profile-image mt-4">
                    <img src="../../assets/img/team/9.jpg" class="card-img-top organic-radius border-primary" alt="image">
            </div>    
            <div class="card-body">
                <h5 class="card-title">Robert Tanislav</h5>
                <h6 class="card-subtitle">UI/UX Designer</h6>
            </div>
        </div>
        <div class="back text-center">
            <div class="card-body p-5">
                <h6 class="card-subtitle">UI/UX Designer</h6>
                <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>
                <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>
                <a class="btn btn-sm btn-secondary" href="#">
                    <span class="fas fa-user-plus mr-1"></span>
                    Follow 
                </a>
            </div>
        </div>
    </div>
</div>
<!-- End of Profile Card -->