Getting Started
How To
Components
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
Luis Muller
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.
John Doe
Bonnie Green
Roy Fendley
<!-- 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>John Doe</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>Bonnie Green</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>Roy Fendley</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.
John Doe
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">John Doe</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 -->