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.
Default profile card
Below is an example of a basic profile-card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with bootstrap 4 various sizing options or grid system
Use the .shadow, .border and .bg-* modifier classes to make profile cards more creative.
Tanislav Robert
Director
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-soft border-light">
<img src="../../assets/img/team/8.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Tanislav Robert</h5>
<h6 class="card-subtitle">Director</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-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-dribbble">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-google-plus">
<i class="fab fa-google-plus"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-dropbox">
<i class="fab fa-dropbox"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- End of Profile Card -->
Images top and bottom
Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.
Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.
Tanislav Robert
Director
Some quick example text to build on the card title and make up the bulk of the card's content.
Calota Oana
Marketing
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-soft border-light">
<img src="../../assets/img/team/8.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Tanislav Robert</h5>
<h6 class="card-subtitle">Director</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-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-dribbble">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-google-plus">
<i class="fab fa-google-plus"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-dropbox">
<i class="fab fa-dropbox"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- End of Profile Card -->
<!-- Profile Card -->
<div class="profile-card">
<div class="card shadow-soft border-light">
<div class="card-body">
<h5 class="card-title">Calota Oana</h5>
<h6 class="card-subtitle">Marketing</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-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-dribbble">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-google-plus">
<i class="fab fa-google-plus"></i>
</a>
</li>
<li>
<a href="#" target="_blank" class="btn btn-link btn-dropbox">
<i class="fab fa-dropbox"></i>
</a>
</li>
</ul>
</div>
<img src="../../assets/img/team/7.jpg" class="card-img-bottom" alt="...">
</div>
</div>
<!-- End of Profile Card -->
Shaped images
Organic image
Tanislav Robert
Director
Some quick example text to build on the card title and make up the bulk of the card's content.
Circle image
Calota Oana
UI/UX Designer
Some quick example text to build on the card title and make up the bulk of the card's content.
Square image
Lucian Alex
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">
<div class="card shadow-soft border-light text-center">
<div class="profile-image">
<img src="../../assets/img/team/9.jpg" class="card-img-top organic-radius" alt="image">
</div>
<div class="card-body mt-n5">
<h5 class="card-title">Tanislav Robert</h5>
<h6 class="card-subtitle">Director</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 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 -->
<!-- Profile Card -->
<div class="profile-card">
<div class="card shadow-soft border-light text-center">
<div class="profile-image">
<img src="../../assets/img/team/10.jpg" class="card-img-top rounded-circle" alt="image">
</div>
<div class="card-body mt-n5">
<h5 class="card-title">Calota Oana</h5>
<h6 class="card-subtitle">UI/UX Designer</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 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 -->
<!-- Profile Card -->
<div class="profile-card">
<div class="card shadow-soft border-light text-center">
<div class="profile-image">
<img src="../../assets/img/team/6.jpg" class="card-img-top" alt="image">
</div>
<div class="card-body mt-n5">
<h5 class="card-title">Lucian Alex</h5>
<h6 class="card-subtitle">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 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 -->
Profile cards with cover image
Tanislav Robert
FollowSome quick example text to build on the card title and make up the bulk of the card's content.
Calota Oana
FollowSome quick example text to build on the card title and make up the bulk of the card's content.
Zoltan Szőgyényi
FollowSome 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="/assets/img/team/cover-profile-2.jpg"></div>
<div class="profile-image-small mt-n6">
<img src="../../assets/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 -->
<!-- Profile Card -->
<div class="profile-card">
<div class="card shadow-sm text-center border-light">
<div class="profile-cover" data-background="/assets/img/team/cover-profile.jpg"></div>
<div class="profile-image-small mt-n6">
<img src="../../assets/img/team/10.jpg" class="card-img-top rounded-circle" alt="image">
</div>
<div class="card-body">
<h5 class="card-title mb-0">Calota Oana</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 -->
<!-- Profile Card -->
<div class="profile-card">
<div class="card shadow-sm text-center border-light">
<div class="profile-cover" data-background="/assets/img/team/cover-profile-3.jpg"></div>
<div class="profile-image-small mt-n6">
<img src="../../assets/img/team/6.jpg" class="card-img-top" alt="image">
</div>
<div class="card-body">
<h5 class="card-title mb-0">Zoltan Szőgyényi</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 -->
Action cards
Tanislav Robert
Timisoara, RORobert drives the technical strategy of the platform and brand.
Tanislav Robert
<!-- Profile Card -->
<div class="profile-card">
<div class="card">
<div class="card-image position-relative overlay-soft-dark">
<img src="../../assets/img/team/9.jpg" class="card-img-top" alt="image">
<div class="dropdown">
<div class="btn-group dropleft">
<a class="dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="icon icon-sm">
<i class="fas fa-ellipsis-h icon-white"></i>
</span>
<span class="sr-only">Toggle Dropdown</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Edit profile</a>
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Settings</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Sign out</a>
</div>
</div>
</div>
</div>
<div class="card-body shadow position-relative mt-n7 mx-2 bg-white text-center">
<h5 class="card-title">Tanislav Robert</h5>
<span class="text-muted"><i class="fas fa-map-marker-alt mr-2"></i>Timisoara, RO</span>
<p class="mt-3">Robert drives the technical strategy of the platform and brand.</p>
<div class="btn-group">
<button class="btn btn-secondary btn-icon">
<span class="btn-inner--icon"><i class="far fa-user"></i></span>
<span class="btn-inner--text">Follow</span>
</button>
<button class="btn btn-dark">
<i class="far fa-envelope"></i>
</button>
</div>
</div>
</div>
</div>
<!-- End of Profile Card -->
<!-- Profile Card -->
<div class="profile-card">
<div class="card text-center shadow border-soft">
<img class="card-img-top profile-image-small organic-radius mt-4" src="../../assets/img/team/9.jpg" alt="image">
<div class="card-body">
<h6 class="card-title">Tanislav Robert</h6>
<span class="d-block">
<i class="star fas fa-star text-warning"></i>
<i class="star fas fa-star text-warning"></i>
<i class="star fas fa-star text-warning"></i>
<i class="star fas fa-star text-warning"></i>
<i class="star far fa-star text-gray"></i>
</span>
<ul class="social-buttons mt-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 class="card-footer p-1">
<a class="btn btn-block btn-primary animate-up-1" href="#">
<span class="far fa-envelope mr-2"></span>
Send a Message
</a>
</div>
</div>
</div>
<!-- End of Profile Card -->
Hover effect
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.
Tanislav Robert
UI/UX Designer
Calota Oana
Web Developer
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.
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 -->