Profiles
Bootstrap 5 Profile page & profile cards
Responsive profile pages and cards built with Bootstrap 5. User profile card, profile picture, followers, avatars, comments, social stats, edit profile form.Basic profile card
A simple profile card template with chat option, square avatar and stat counters.
Danny McLoan
Senior Journalist
Articles
41
Followers
976
Rating
8.5
<section class="w-100 px-4 py-5" style="background-color: #9de2ff; border-radius: .5rem .5rem 0 0;">
<div class="row d-flex justify-content-center">
<div class="col col-md-9 col-lg-7 col-xl-6">
<div class="card" style="border-radius: 15px;">
<div class="card-body p-4">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-profiles/avatar-1.webp"
alt="Generic placeholder image" class="img-fluid" style="width: 180px; border-radius: 10px;">
</div>
<div class="flex-grow-1 ms-3">
<h5 class="mb-1">Danny McLoan</h5>
<p class="mb-2 pb-1">Senior Journalist</p>
<div class="d-flex justify-content-start rounded-3 p-2 mb-2 bg-body-tertiary">
<div>
<p class="small text-muted mb-1">Articles</p>
<p class="mb-0">41</p>
</div>
<div class="px-3">
<p class="small text-muted mb-1">Followers</p>
<p class="mb-0">976</p>
</div>
<div>
<p class="small text-muted mb-1">Rating</p>
<p class="mb-0">8.5</p>
</div>
</div>
<div class="d-flex pt-1">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary me-1 flex-grow-1">Chat</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary flex-grow-1">Follow</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
eCommerce profile card
A eCommerce profile card with a star rating number of comments / testimonial reviews and a "Book now" call to action button. The CTA in this case could be integrated with a calendar schedule.
Exquisite hand henna tattoo
3 hrs
$90
@sheisme
52 comments
<section class="vh-100" style="background-color: #eee;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-md-9 col-lg-7 col-xl-5">
<div class="card" style="border-radius: 15px; background-color: #93e2bb;">
<div class="card-body p-4 text-black">
<div>
<h6 class="mb-4">Exquisite hand henna tattoo</h6>
<div class="d-flex align-items-center justify-content-between mb-3">
<p class="small mb-0"><i class="far fa-clock me-2"></i>3 hrs</p>
<p class="fw-bold mb-0">$90</p>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="flex-shrink-0">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-profiles/avatar-2.webp"
alt="Generic placeholder image" class="img-fluid rounded-circle border border-dark border-3"
style="width: 70px;">
</div>
<div class="flex-grow-1 ms-3">
<div class="d-flex flex-row align-items-center mb-2">
<p class="mb-0 me-2">@sheisme</p>
<ul class="mb-0 list-unstyled d-flex flex-row" style="color: #1B7B2C;">
<li>
<i class="fas fa-star fa-xs"></i>
</li>
<li>
<i class="fas fa-star fa-xs"></i>
</li>
<li>
<i class="fas fa-star fa-xs"></i>
</li>
<li>
<i class="fas fa-star fa-xs"></i>
</li>
<li>
<i class="fas fa-star fa-xs"></i>
</li>
</ul>
</div>
<div>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-dark btn-rounded btn-sm"
data-mdb-ripple-color="dark">+ Follow</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-dark btn-rounded btn-sm"
data-mdb-ripple-color="dark">See profile</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-dark btn-floating btn-sm"
data-mdb-ripple-color="dark"><i class="fas fa-comment"></i></button>
</div>
</div>
</div>
<hr>
<p class="my-4 pb-1">52 comments</p>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-success btn-rounded btn-block btn-lg"><i
class="far fa-clock me-2"></i>Book now</button>
</div>
</div>
</div>
</div>
</div>
</section>
User profile page template
A full user profile layout, with a circle profile picture in the header, projects section with social icons, a detailed address section and experience cards using progress bars to indicate skill level.
John Smith
Full Stack Developer
Bay Area, San Francisco, CA
-
https://mdbootstrap.com
-
mdbootstrap
-
@mdbootstrap
-
mdbootstrap
-
mdbootstrap
Full Name
Johnatan Smith
example@example.com
Phone
(097) 234-5678
Mobile
(098) 765-4321
Address
Bay Area, San Francisco, CA
assigment Project Status
Web Design
Website Markup
One Page
Mobile Template
Backend API
assigment Project Status
Web Design
Website Markup
One Page
Mobile Template
Backend API
<section style="background-color: #eee;">
<div class="container py-5">
<div class="row">
<div class="col">
<nav aria-label="breadcrumb" class="bg-body-tertiary rounded-3 p-3 mb-4">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">User</a></li>
<li class="breadcrumb-item active" aria-current="page">User Profile</li>
</ol>
</nav>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="card mb-4">
<div class="card-body text-center">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3.webp" alt="avatar"
class="rounded-circle img-fluid" style="width: 150px;">
<h5 class="my-3">John Smith</h5>
<p class="text-muted mb-1">Full Stack Developer</p>
<p class="text-muted mb-4">Bay Area, San Francisco, CA</p>
<div class="d-flex justify-content-center mb-2">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Follow</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary ms-1">Message</button>
</div>
</div>
</div>
<div class="card mb-4 mb-lg-0">
<div class="card-body p-0">
<ul class="list-group list-group-flush rounded-3">
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
<i class="fas fa-globe fa-lg text-warning"></i>
<p class="mb-0">https://mdbootstrap.com</p>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
<i class="fab fa-github fa-lg text-body"></i>
<p class="mb-0">mdbootstrap</p>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
<i class="fab fa-twitter fa-lg" style="color: #55acee;"></i>
<p class="mb-0">@mdbootstrap</p>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
<i class="fab fa-instagram fa-lg" style="color: #ac2bac;"></i>
<p class="mb-0">mdbootstrap</p>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
<i class="fab fa-facebook-f fa-lg" style="color: #3b5998;"></i>
<p class="mb-0">mdbootstrap</p>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="card mb-4">
<div class="card-body">
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Full Name</p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">Johnatan Smith</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Email</p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">example@example.com</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Phone</p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">(097) 234-5678</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Mobile</p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">(098) 765-4321</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Address</p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">Bay Area, San Francisco, CA</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card mb-4 mb-md-0">
<div class="card-body">
<p class="mb-4"><span class="text-primary font-italic me-1">assigment</span> Project Status
</p>
<p class="mb-1" style="font-size: .77rem;">Web Design</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Website Markup</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 72%" aria-valuenow="72"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">One Page</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 89%" aria-valuenow="89"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Mobile Template</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 55%" aria-valuenow="55"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Backend API</p>
<div class="progress rounded mb-2" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 66%" aria-valuenow="66"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-4 mb-md-0">
<div class="card-body">
<p class="mb-4"><span class="text-primary font-italic me-1">assigment</span> Project Status
</p>
<p class="mb-1" style="font-size: .77rem;">Web Design</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Website Markup</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 72%" aria-valuenow="72"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">One Page</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 89%" aria-valuenow="89"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Mobile Template</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 55%" aria-valuenow="55"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Backend API</p>
<div class="progress rounded mb-2" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 66%" aria-valuenow="66"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Project cards with attending users
The list of attendance in this example is indicated by profile pictures of users that joined the event.
Program Title
| Created by MDBootstrap on 11 April , 2021
settings
program link
program link |
Company Culture
| Public | Updated by MDBootstrap on 11 April , 2021
settings
program link
program link |
<section class="vh-100" style="background-color: #5f59f7;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-xl-10">
<div class="card mb-5" style="border-radius: 15px;">
<div class="card-body p-4">
<h3 class="mb-3">Program Title</h3>
<p class="small mb-0"><i class="far fa-star fa-lg"></i> <span class="mx-2">|</span> Created by
<strong>MDBootstrap</strong> on 11 April , 2021</p>
<hr class="my-4">
<div class="d-flex justify-content-start align-items-center">
<p class="mb-0 text-uppercase"><i class="fas fa-cog me-2"></i> <span
class="text-muted small">settings</span></p>
<p class="mb-0 text-uppercase"><i class="fas fa-link ms-4 me-2"></i> <span
class="text-muted small">program link</span></p>
<p class="mb-0 text-uppercase"><i class="fas fa-ellipsis-h ms-4 me-2"></i> <span
class="text-muted small">program link</span>
<span class="ms-3 me-4">|</span></p>
<a href="#!">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp" alt="avatar"
class="img-fluid rounded-circle me-3" width="35">
</a>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-dark btn-sm btn-floating">
<i class="fas fa-plus text-body"></i>
</button>
</div>
</div>
</div>
<div class="card" style="border-radius: 15px;">
<div class="card-body p-4">
<h3 class="mb-3">Company Culture</h3>
<p class="small mb-0"><i class="fas fa-star fa-lg text-warning"></i> <span class="mx-2">|</span>
Public <span class="mx-2">|</span> Updated by <strong>MDBootstrap</strong> on 11 April , 2021
</p>
<hr class="my-4">
<div class="d-flex justify-content-start align-items-center">
<p class="mb-0 text-uppercase"><i class="fas fa-cog me-2"></i> <span
class="text-muted small">settings</span></p>
<p class="mb-0 text-uppercase"><i class="fas fa-link ms-4 me-2"></i> <span
class="text-muted small">program link</span></p>
<p class="mb-0 text-uppercase"><i class="fas fa-ellipsis-h ms-4 me-2"></i> <span
class="text-muted small">program link</span>
<span class="ms-3 me-4">|</span></p>
<a href="#!">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp" alt="avatar"
class="img-fluid rounded-circle me-1" width="35">
</a>
<a href="#!">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp" alt="avatar"
class="img-fluid rounded-circle me-1" width="35">
</a>
<a href="#!">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-4.webp" alt="avatar"
class="img-fluid rounded-circle me-1" width="35">
</a>
<a href="#!">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp" alt="avatar"
class="img-fluid rounded-circle me-3" width="35">
</a>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-dark btn-sm btn-floating">
<i class="fas fa-plus text-body"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Personal profile with edit icon
Responsive profile card design with a clickable update option for the user. Check out the inputs documentation, to integrate & make this template interactive.
<section class="vh-100" style="background-color: #f4f5f7;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-lg-6 mb-4 mb-lg-0">
<div class="card mb-3" style="border-radius: .5rem;">
<div class="row g-0">
<div class="col-md-4 gradient-custom text-center text-white"
style="border-top-left-radius: .5rem; border-bottom-left-radius: .5rem;">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
alt="Avatar" class="img-fluid my-5" style="width: 80px;" />
<h5>Marie Horwitz</h5>
<p>Web Designer</p>
<i class="far fa-edit mb-5"></i>
</div>
<div class="col-md-8">
<div class="card-body p-4">
<h6>Information</h6>
<hr class="mt-0 mb-4">
<div class="row pt-1">
<div class="col-6 mb-3">
<h6>Email</h6>
<p class="text-muted">info@example.com</p>
</div>
<div class="col-6 mb-3">
<h6>Phone</h6>
<p class="text-muted">123 456 789</p>
</div>
</div>
<h6>Projects</h6>
<hr class="mt-0 mb-4">
<div class="row pt-1">
<div class="col-6 mb-3">
<h6>Recent</h6>
<p class="text-muted">Lorem ipsum</p>
</div>
<div class="col-6 mb-3">
<h6>Most Viewed</h6>
<p class="text-muted">Dolor sit amet</p>
</div>
</div>
<div class="d-flex justify-content-start">
<a href="#!"><i class="fab fa-facebook-f fa-lg me-3"></i></a>
<a href="#!"><i class="fab fa-twitter fa-lg me-3"></i></a>
<a href="#!"><i class="fab fa-instagram fa-lg"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.gradient-custom {
/* fallback for old browsers */
background: #f6d365;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right bottom, rgba(246, 211, 101, 1), rgba(253, 160, 133, 1));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right bottom, rgba(246, 211, 101, 1), rgba(253, 160, 133, 1))
}
Edit button on profile page
An elegant profile page layout, with an edit button, about section and a photo gallery.
Andy Horwitz
New York
253
Photos
1026
Followers
478
Following
.webp)
.webp)
.webp)
.webp)
<section class="h-100 gradient-custom-2">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center">
<div class="col col-lg-9 col-xl-8">
<div class="card">
<div class="rounded-top text-white d-flex flex-row" style="background-color: #000; height:200px;">
<div class="ms-4 mt-5 d-flex flex-column" style="width: 150px;">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-profiles/avatar-1.webp"
alt="Generic placeholder image" class="img-fluid img-thumbnail mt-4 mb-2"
style="width: 150px; z-index: 1">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-dark text-body" data-mdb-ripple-color="dark" style="z-index: 1;">
Edit profile
</button>
</div>
<div class="ms-3" style="margin-top: 130px;">
<h5>Andy Horwitz</h5>
<p>New York</p>
</div>
</div>
<div class="p-4 text-black bg-body-tertiary">
<div class="d-flex justify-content-end text-center py-1 text-body">
<div>
<p class="mb-1 h5">253</p>
<p class="small text-muted mb-0">Photos</p>
</div>
<div class="px-3">
<p class="mb-1 h5">1026</p>
<p class="small text-muted mb-0">Followers</p>
</div>
<div>
<p class="mb-1 h5">478</p>
<p class="small text-muted mb-0">Following</p>
</div>
</div>
</div>
<div class="card-body p-4 text-black">
<div class="mb-5 text-body">
<p class="lead fw-normal mb-1">About</p>
<div class="p-4 bg-body-tertiary">
<p class="font-italic mb-1">Web Developer</p>
<p class="font-italic mb-1">Lives in New York</p>
<p class="font-italic mb-0">Photographer</p>
</div>
</div>
<div class="d-flex justify-content-between align-items-center mb-4 text-body">
<p class="lead fw-normal mb-0">Recent photos</p>
<p class="mb-0"><a href="#!" class="text-muted">Show all</a></p>
</div>
<div class="row g-2">
<div class="col mb-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Lightbox/Original/img%20(112).webp" alt="image 1"
class="w-100 rounded-3">
</div>
<div class="col mb-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Lightbox/Original/img%20(107).webp" alt="image 1"
class="w-100 rounded-3">
</div>
</div>
<div class="row g-2">
<div class="col">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Lightbox/Original/img%20(108).webp" alt="image 1"
class="w-100 rounded-3">
</div>
<div class="col">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Lightbox/Original/img%20(114).webp" alt="image 1"
class="w-100 rounded-3">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.gradient-custom-2 {
/* fallback for old browsers */
background: #fbc2eb;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(251, 194, 235, 1), rgba(166, 193, 238, 1));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, rgba(251, 194, 235, 1), rgba(166, 193, 238, 1))
}
Profile card with statistics
A light design for any profile card, with social buttons and basic stats.
Julie L. Arsenault
@Programmer | mdbootstrap.com
8471
Wallets Balance
8512
Income amounts
4751
Total Transactions
<section class="vh-100">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-md-12 col-xl-4">
<div class="card" style="border-radius: 15px;">
<div class="card-body text-center">
<div class="mt-3 mb-4">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
class="rounded-circle img-fluid" style="width: 100px;" />
</div>
<h4 class="mb-2">Julie L. Arsenault</h4>
<p class="text-muted mb-4">@Programmer <span class="mx-2">|</span> <a
href="#!">mdbootstrap.com</a></p>
<div class="mb-4 pb-2">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary btn-floating">
<i class="fab fa-facebook-f fa-lg"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary btn-floating">
<i class="fab fa-twitter fa-lg"></i>
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary btn-floating">
<i class="fab fa-skype fa-lg"></i>
</button>
</div>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-rounded btn-lg">
Message now
</button>
<div class="d-flex justify-content-between text-center mt-5 mb-2">
<div>
<p class="mb-2 h5">8471</p>
<p class="text-muted mb-0">Wallets Balance</p>
</div>
<div class="px-3">
<p class="mb-2 h5">8512</p>
<p class="text-muted mb-0">Income amounts</p>
</div>
<div>
<p class="mb-2 h5">4751</p>
<p class="text-muted mb-0">Total Transactions</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>