Profiles
Bootstrap 5 Profiles component
Responsive Profiles built with Bootstrap 5. Lots of templates such as card profile, user profile, profile form, with followers, avatars, comments, stats, social media and many more
Basic example
Danny McLoan
Senior Journalist
Articles
41
Followers
976
Rating
8.5
<section class="vh-100" style="background-color: #9de2ff;">
<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;">
<div class="card-body p-4">
<div class="d-flex text-black">
<div class="flex-shrink-0">
<img src="https://mdbootstrap.com/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" style="color: #2b2a2a;">Senior Journalist</p>
<div class="d-flex justify-content-start rounded-3 p-2 mb-2" style="background-color: #efefef;">
<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" class="btn btn-outline-primary me-1 flex-grow-1">Chat</button>
<button type="button" class="btn btn-primary flex-grow-1">Follow</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Profiles #2
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://mdbootstrap.com/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" class="btn btn-outline-dark btn-rounded btn-sm" data-mdb-ripple-color="dark" >+ Follow</button>
<button type="button" class="btn btn-outline-dark btn-rounded btn-sm" data-mdb-ripple-color="dark" >See profile</button>
<button type="button" 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" 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>
Profiles #3
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-light 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://mdbootstrap.com/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" class="btn btn-primary">Follow</button>
<button type="button" 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" style="color: #333333;"></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>
Profiles #4
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" class="btn btn-outline-dark btn-sm btn-floating">
<i class="fas fa-plus"></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" class="btn btn-outline-dark btn-sm btn-floating">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Profiles #5
<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="..."
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))
}
Profiles #6
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 align-items-center h-100">
<div class="col col-lg-9 col-xl-7">
<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://mdbootstrap.com/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" class="btn btn-outline-dark" 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" style="background-color: #f8f9fa;">
<div class="d-flex justify-content-end text-center py-1">
<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">
<p class="lead fw-normal mb-1">About</p>
<div class="p-4" style="background-color: #f8f9fa;">
<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">
<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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(108).webp" alt="image 1" class="w-100 rounded-3">
</div>
<div class="col">
<img src="https://mdbootstrap.com/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))
}
Profiles #7
Julie L. Arsenault
@Programmer | mdbootstrap.com
8471
Wallets Balance
8512
Income amounts
4751
Total Transactions
<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-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" class="btn btn-outline-primary btn-floating">
<i class="fab fa-facebook-f fa-lg"></i>
</button>
<button type="button" class="btn btn-outline-primary btn-floating">
<i class="fab fa-twitter fa-lg"></i>
</button>
<button type="button" class="btn btn-outline-primary btn-floating">
<i class="fab fa-skype fa-lg"></i>
</button>
</div>
<button type="button" 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>