Bootstrap Tables:

Responsive Bootstrap Profile Card

Personal branding has become increasingly more popular during the past few years. With this increase, profile cards have also become really common these days. Back in the day, people used a page to write about themselves and then added a hyperlink to that page in their content. It wasn’t the worst idea in the world. It got the job done and was convenient enough but as time went on, new design elements and features became available and one of them were profile cards. They were much more intuitive and stylish and could be customized to bring a sense of uniqueness to your website. A responsive beautiful card for your profile includes a profile picture and some condensed information about yourself. It can build trust and improve your reputation online.

Whether you use Bootstrap or plain CSS codes, here is a great responsive profile card template for you to use in your website. These Bootstrap cards feature a profile picture with a status indicator next to it. The background consists of a coloured bar at the top and white space. The name and a short description are included under the profile pictures in these Bootstrap CSS cards. A small space is also dedicated to the mutual friends section. Besides that, there is an invite now button as well if you wanted to contact the person.

Bootstrap Card

Responsive Profile Card

Bootstrap CSS Card

Responsive Beautiful Card

<!-- This script got from frontendfreecode.com -->
<div class="center-div">
    <div class="container">
        <div class="grid grid--user-profile">
            <div class="grid__column">
                <div class="card card--user-profile ">
                    <div class="card--user-profile__cover"></div>
                    <div class="card-body">
                        <figure class="avatar avatar--online">
                            <div class="avatar__thumbnail">
                                <img src="http://frontendfreecode.com/img/profile-img-812.jpg" class="avatar__image" alt="Picture of avatar">
                            </div>
                            <figcaption class="avatar__meta">
                                <h5 class="avatar__title js-user-name">Name Family</h5>
                                <div class="avatar__summery js-multiline-truncate">Team Lead/ Some Thing Developer at XZY Company </div>

                            </figcaption>
                        </figure>
                        <figure class="mutual-connection mb-4">
                            <img src="http://frontendfreecode.com/img/profile-img-96.jpg" class="mutual-connection__image" alt="Picture of user">
                            <img src="http://frontendfreecode.com/img/profile-img-81.jpg" class="mutual-connection__image" alt="Picture of user">
                            <img src="http://frontendfreecode.com/img/profile-img-51.jpg" class="mutual-connection__image" alt="Picture of user">
                            <figcaption class="mutual-connection__caption">10 mutual connections</figcaption>
                        </figure>
                        <a href="#" role="button" class="btn btn-outline-dark">Invite Now</a>
                    </div>
                </div>
            </div>
            <div class="grid__column">
                <div class="card card--user-profile ">
                    <div class="card--user-profile__cover"></div>
                    <div class="card-body">
                        <figure class="avatar avatar--online">
                            <div class="avatar__thumbnail">
                                <img src="http://frontendfreecode.com/img/profile-img-80.jpg" class="avatar__image" alt="Picture of avatar">
                            </div>
                            <figcaption class="avatar__meta">
                                <h5 class="avatar__title js-user-name">Shrawan Kumar</h5>
                                <div class="avatar__summery js-multiline-truncate">Team Lead/ Some Thing Developer at XZY Company </div>
                            </figcaption>
                        </figure>
                        <figure class="mutual-connection mb-4">
                            <img src="http://frontendfreecode.com/img/profile-img-96.jpg" class="mutual-connection__image" alt="Picture of user">
                            <img src="http://frontendfreecode.com/img/profile-img-81.jpg" class="mutual-connection__image" alt="Picture of user">
                            <img src="http://frontendfreecode.com/img/profile-img-51.jpg" class="mutual-connection__image" alt="Picture of user">
                            <figcaption class="mutual-connection__caption">10 mutual connections</figcaption>
                        </figure>
                        <a href="#" role="button" class="btn btn-outline-dark">Invite Now</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600");
.mutual-connection__image, .avatar__image, .avatar--online .avatar__thumbnail:after {
  border-radius: 50%;
  overflow: hidden;
}
body {
  font-family: "Poppins", sans-serif;
  padding: 2rem 0;
}
.center-div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar {
  --size: 6rem;
}
.avatar__thumbnail {
  position: relative;
  display: inline-flex;
  width: var(--size, 6rem);
  height: var(--size, 6rem);
  background-color: #eee;
  border-radius: 50%;
}
.avatar--online .avatar__thumbnail:after {
  width: 1rem;
  height: 1rem;
  content: " ";
  position: absolute;
  right: 0px;
  bottom: 6px;
  background-color: #2ecc71;
  border: 2px solid white;
  z-index: 1;
}
.avatar--online .avatar__thumbnail:before {
  content: attr(data-name);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: white;
  font-size: 1.5rem;
  z-index: 0;
  letter-spacing: 1.5px;
}

.avatar__image {
  width: var(--size, 6rem);
  height: var(--size, 6rem);
  z-index: 1;
}
.avatar__title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.avatar__summery {
  color: #5c6863;
}

.mutual-connection {
  --size: 3rem;
  margin-left: 1.5rem;
  display: flex;
  align-items: center;
  color: #05668d;
}
.mutual-connection__image {
  width: var(--size, 6rem);
  height: var(--size, 6rem);
  border: 2px solid white;
  margin-left: -1.5rem;
  flex: 0 0 auto;
  box-sizing: border-box;
}
.mutual-connection__caption {
  padding-left: 0.75rem;
}

.card--user-profile {
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s;
  transform: translateY(10px);
}
.card--user-profile:hover {
  transform: translateY(-15px);
  box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.3);
}
.card--user-profile__cover {
  height: 4.75rem;
  opacity: 0.5;
  width: 100%;
  position: absolute;
  top: 0;
}
.grid__column:nth-of-type(10n+1) .card--user-profile__cover {
  background-color: #F44336;
}
.grid__column:nth-of-type(10n+2) .card--user-profile__cover {
  background-color: #E91E63;
}
.grid__column:nth-of-type(10n+3) .card--user-profile__cover {
  background-color: #9C27B0;
}
.grid__column:nth-of-type(10n+4) .card--user-profile__cover {
  background-color: #009688;
}
.grid__column:nth-of-type(10n+5) .card--user-profile__cover {
  background-color: #3F51B5;
}
.grid__column:nth-of-type(10n+6) .card--user-profile__cover {
  background-color: #2196F3;
}
.grid__column:nth-of-type(10n+7) .card--user-profile__cover {
  background-color: #4CAF50;
}
.grid__column:nth-of-type(10n+8) .card--user-profile__cover {
  background-color: #FF5722;
}

.grid__column:nth-of-type(10n+9) .card--user-profile__cover {
  background-color: #9E9E9E;
}
.grid__column:nth-of-type(10n+10) .card--user-profile__cover {
  background-color: #607D8B;
}
.card--user-profile .avatar {
  position: relative;
}
.grid__column:nth-of-type(10n+1) .card--user-profile .avatar__thumbnail {
  background-color: #F44336;
}
.grid__column:nth-of-type(10n+2) .card--user-profile .avatar__thumbnail {
  background-color: #E91E63;
}
.grid__column:nth-of-type(10n+3) .card--user-profile .avatar__thumbnail {
  background-color: #9C27B0;
}

.grid__column:nth-of-type(10n+4) .card--user-profile .avatar__thumbnail {
  background-color: #009688;
}
.grid__column:nth-of-type(10n+5) .card--user-profile .avatar__thumbnail {
  background-color: #3F51B5;
}
.grid__column:nth-of-type(10n+6) .card--user-profile .avatar__thumbnail {
  background-color: #2196F3;
}

.grid__column:nth-of-type(10n+7) .card--user-profile .avatar__thumbnail {
  background-color: #4CAF50;
}
.grid__column:nth-of-type(10n+8) .card--user-profile .avatar__thumbnail {
  background-color: #FF5722;
}
.grid__column:nth-of-type(10n+9) .card--user-profile .avatar__thumbnail {
  background-color: #9E9E9E;
}
.grid__column:nth-of-type(10n+10) .card--user-profile .avatar__thumbnail {
  background-color: #607D8B;
}
.card.text-center .mutual-connection {
  justify-content: center;
}

.grid--user-profile {
  display: flex;
  margin: -15px;
  justify-content: center;
}
.grid--user-profile .grid__column {
  flex: 1 1 100%;
  padding: 15px;
}
@media (min-width: 576px) {
  .grid--user-profile .grid__column {
    flex: 1 1 50%;
  }
}
@media (min-width: 767px) {
  .grid--user-profile .grid__column {
    flex: 0 1 33.33%;
  }
}
@media (min-width: 992px) {
  .grid--user-profile .grid__column {
    flex: 0 1 25%;
  }
}

let truncateText = document.querySelectorAll(".js-multiline-truncate");
for (i = 0; i < truncateText.length; i++) {
    // console.log(truncateText[i][0]); 
    let truncateTextEach = truncateText[i];
    $clamp(truncateTextEach, { clamp: 2 });
}
let names = document.querySelectorAll('.js-user-name');
names.forEach((name, i) => {
    let shortName = name.innerText.split(' ').map(w => w[0]).join("");
    document.getElementsByClassName("avatar__thumbnail")[i].dataset.name = shortName;
})

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Clamp.js/0.5.1/clamp.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Clamp.js/0.5.1/clamp.min.js'></script>
<style>
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600");
.mutual-connection__image, .avatar__image, .avatar--online .avatar__thumbnail:after {
  border-radius: 50%;
  overflow: hidden;
}
body {
  font-family: "Poppins", sans-serif;
  padding: 2rem 0;
}
.center-div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar {
  --size: 6rem;
}
.avatar__thumbnail {
  position: relative;
  display: inline-flex;
  width: var(--size, 6rem);
  height: var(--size, 6rem);
  background-color: #eee;
  border-radius: 50%;
}
.avatar--online .avatar__thumbnail:after {
  width: 1rem;
  height: 1rem;
  content: " ";
  position: absolute;
  right: 0px;
  bottom: 6px;
  background-color: #2ecc71;
  border: 2px solid white;
  z-index: 1;
}
.avatar--online .avatar__thumbnail:before {
  content: attr(data-name);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: white;
  font-size: 1.5rem;
  z-index: 0;
  letter-spacing: 1.5px;
}

.avatar__image {
  width: var(--size, 6rem);
  height: var(--size, 6rem);
  z-index: 1;
}
.avatar__title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.avatar__summery {
  color: #5c6863;
}

.mutual-connection {
  --size: 3rem;
  margin-left: 1.5rem;
  display: flex;
  align-items: center;
  color: #05668d;
}
.mutual-connection__image {
  width: var(--size, 6rem);
  height: var(--size, 6rem);
  border: 2px solid white;
  margin-left: -1.5rem;
  flex: 0 0 auto;
  box-sizing: border-box;
}
.mutual-connection__caption {
  padding-left: 0.75rem;
}

.card--user-profile {
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s;
  transform: translateY(10px);
}
.card--user-profile:hover {
  transform: translateY(-15px);
  box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.3);
}
.card--user-profile__cover {
  height: 4.75rem;
  opacity: 0.5;
  width: 100%;
  position: absolute;
  top: 0;
}
.grid__column:nth-of-type(10n+1) .card--user-profile__cover {
  background-color: #F44336;
}
.grid__column:nth-of-type(10n+2) .card--user-profile__cover {
  background-color: #E91E63;
}
.grid__column:nth-of-type(10n+3) .card--user-profile__cover {
  background-color: #9C27B0;
}
.grid__column:nth-of-type(10n+4) .card--user-profile__cover {
  background-color: #009688;
}
.grid__column:nth-of-type(10n+5) .card--user-profile__cover {
  background-color: #3F51B5;
}
.grid__column:nth-of-type(10n+6) .card--user-profile__cover {
  background-color: #2196F3;
}
.grid__column:nth-of-type(10n+7) .card--user-profile__cover {
  background-color: #4CAF50;
}
.grid__column:nth-of-type(10n+8) .card--user-profile__cover {
  background-color: #FF5722;
}

.grid__column:nth-of-type(10n+9) .card--user-profile__cover {
  background-color: #9E9E9E;
}
.grid__column:nth-of-type(10n+10) .card--user-profile__cover {
  background-color: #607D8B;
}
.card--user-profile .avatar {
  position: relative;
}
.grid__column:nth-of-type(10n+1) .card--user-profile .avatar__thumbnail {
  background-color: #F44336;
}
.grid__column:nth-of-type(10n+2) .card--user-profile .avatar__thumbnail {
  background-color: #E91E63;
}
.grid__column:nth-of-type(10n+3) .card--user-profile .avatar__thumbnail {
  background-color: #9C27B0;
}

.grid__column:nth-of-type(10n+4) .card--user-profile .avatar__thumbnail {
  background-color: #009688;
}
.grid__column:nth-of-type(10n+5) .card--user-profile .avatar__thumbnail {
  background-color: #3F51B5;
}
.grid__column:nth-of-type(10n+6) .card--user-profile .avatar__thumbnail {
  background-color: #2196F3;
}

.grid__column:nth-of-type(10n+7) .card--user-profile .avatar__thumbnail {
  background-color: #4CAF50;
}
.grid__column:nth-of-type(10n+8) .card--user-profile .avatar__thumbnail {
  background-color: #FF5722;
}
.grid__column:nth-of-type(10n+9) .card--user-profile .avatar__thumbnail {
  background-color: #9E9E9E;
}
.grid__column:nth-of-type(10n+10) .card--user-profile .avatar__thumbnail {
  background-color: #607D8B;
}
.card.text-center .mutual-connection {
  justify-content: center;
}

.grid--user-profile {
  display: flex;
  margin: -15px;
  justify-content: center;
}
.grid--user-profile .grid__column {
  flex: 1 1 100%;
  padding: 15px;
}
@media (min-width: 576px) {
  .grid--user-profile .grid__column {
    flex: 1 1 50%;
  }
}
@media (min-width: 767px) {
  .grid--user-profile .grid__column {
    flex: 0 1 33.33%;
  }
}
@media (min-width: 992px) {
  .grid--user-profile .grid__column {
    flex: 0 1 25%;
  }
}
</style>

</head>
<body>
<div class="center-div">
    <div class="container">
        <div class="grid grid--user-profile">
            <div class="grid__column">
                <div class="card card--user-profile ">
                    <div class="card--user-profile__cover"></div>
                    <div class="card-body">
                        <figure class="avatar avatar--online">
                            <div class="avatar__thumbnail">
                                <img src="http://frontendfreecode.com/img/profile-img-812.jpg" class="avatar__image" alt="Picture of avatar">
                            </div>
                            <figcaption class="avatar__meta">
                                <h5 class="avatar__title js-user-name">Name Family</h5>
                                <div class="avatar__summery js-multiline-truncate">Team Lead/ Some Thing Developer at XZY Company </div>

                            </figcaption>
                        </figure>
                        <figure class="mutual-connection mb-4">
                            <img src="http://frontendfreecode.com/img/profile-img-96.jpg" class="mutual-connection__image" alt="Picture of user">
                            <img src="http://frontendfreecode.com/img/profile-img-81.jpg" class="mutual-connection__image" alt="Picture of user">
                            <img src="http://frontendfreecode.com/img/profile-img-51.jpg" class="mutual-connection__image" alt="Picture of user">
                            <figcaption class="mutual-connection__caption">10 mutual connections</figcaption>
                        </figure>
                        <a href="#" role="button" class="btn btn-outline-dark">Invite Now</a>
                    </div>
                </div>
            </div>
            <div class="grid__column">
                <div class="card card--user-profile ">
                    <div class="card--user-profile__cover"></div>
                    <div class="card-body">
                        <figure class="avatar avatar--online">
                            <div class="avatar__thumbnail">
                                <img src="http://frontendfreecode.com/img/profile-img-80.jpg" class="avatar__image" alt="Picture of avatar">
                            </div>
                            <figcaption class="avatar__meta">
                                <h5 class="avatar__title js-user-name">Shrawan Kumar</h5>
                                <div class="avatar__summery js-multiline-truncate">Team Lead/ Some Thing Developer at XZY Company </div>
                            </figcaption>
                        </figure>
                        <figure class="mutual-connection mb-4">
                            <img src="http://frontendfreecode.com/img/profile-img-96.jpg" class="mutual-connection__image" alt="Picture of user">
                            <img src="http://frontendfreecode.com/img/profile-img-81.jpg" class="mutual-connection__image" alt="Picture of user">
                            <img src="http://frontendfreecode.com/img/profile-img-51.jpg" class="mutual-connection__image" alt="Picture of user">
                            <figcaption class="mutual-connection__caption">10 mutual connections</figcaption>
                        </figure>
                        <a href="#" role="button" class="btn btn-outline-dark">Invite Now</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
let truncateText = document.querySelectorAll(".js-multiline-truncate");
for (i = 0; i < truncateText.length; i++) {
    // console.log(truncateText[i][0]); 
    let truncateTextEach = truncateText[i];
    $clamp(truncateTextEach, { clamp: 2 });
}
let names = document.querySelectorAll('.js-user-name');
names.forEach((name, i) => {
    let shortName = name.innerText.split(' ').map(w => w[0]).join("");
    document.getElementsByClassName("avatar__thumbnail")[i].dataset.name = shortName;
})
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS