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

Generic placeholder image
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.jpg" 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

Generic placeholder image

@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.jpg" 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

avatar
John Smith

Full Stack Developer

Bay Area, San Francisco, CA

  • https://mdbootstrap.com

  • mdbootstrap

  • @mdbootstrap

  • mdbootstrap

  • mdbootstrap

Full Name

Johnatan Smith


Email

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.png" 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 |

avatar

Company Culture

| Public | Updated by MDBootstrap on 11 April , 2021


settings

program link

program link |

avatar avatar avatar avatar

          <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.jpg" 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.jpg" 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.jpg" 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.jpg" 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.jpg" 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

...
Marie Horwitz

Web Designer

Information

Email

info@example.com

Phone

123 456 789

Projects

Recent

Lorem ipsum

Most Viewed

Dolor sit amet


          <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.png"
                          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

Generic placeholder image
Andy Horwitz

New York

253

Photos

1026

Followers

478

Following

About

Web Developer

Lives in New York

Photographer

Recent photos

Show all

image 1
image 1
image 1
image 1

          <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.jpg" 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).jpg" 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).jpg" 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).jpg" alt="image 1" class="w-100 rounded-3">
                        </div>
                        <div class="col">
                          <img src="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(114).jpg" 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.png"
                          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>