Bootstrap 5 Team Card Template

This Bootstrap team card template is perfect for showcasing company or business team members. We use Bootstrap cards to build this modern, trendy, responsive layout for team members.

Bootstrap 5 Team Card Template

This Bootstrap team card template has three column layout with an excellent hover effect. This Bootstrap team card template is free and very easy to customize. This snippet has an extraordinary UI design with Bootstrap icons.

PreviewGet Code
More SnippetsJoin BS Brain

Tools

Bootstrap 5 Snippet Update

We have updated this Bootstrap snippet to Bootstrap 5.3.2 and BSB Framework 2.0.2. We have rechecked this Bootstrap component on Oct 5, 2023.

Best Ready to Use Web Themes & Templates

Download Now

Features

  • Bootstrap 5
  • BS Brain Framework
  • HTML5 & CSS3
  • W3C Valid
  • Commented Code
  • Team Members
  • Responsive Layout
  • Minimal Design
  • Clean Snippet
  • SEO Optimized
  • Easy to Use
  • Cross Browser Compatible

Browse

Category

, , , , ,

Tags

, , , , , ,

Popular

Templates

Bootstrap One Page Templates, Bootstrap 5 Templates, Free Bootstrap Templates

Components

Bootstrap Login Forms, Bootstrap 5 Snippets, Bootstrap Cards, Bootstrap Carousels, Bootstrap Heroes, Bootstrap Footers

Preview

<!-- Team 2 - Bootstrap Brain Component -->
<section class="py-3 py-md-5 py-xl-8">
  <div class="container">
    <div class="row justify-content-md-center">
      <div class="col-12 col-md-10 col-lg-8 col-xl-7 col-xxl-6">
        <h2 class="fs-6 text-secondary mb-2 text-uppercase text-center">Our Team</h2>
        <p class="display-5 mb-4 mb-md-5 text-center">With Our Team, you can expect personalized attention and engaging designs.</p>
        <hr class="w-50 mx-auto mb-5 mb-xl-9 border-dark-subtle">
      </div>
    </div>
  </div>

  <div class="container overflow-hidden">
    <div class="row gy-4 gy-lg-0">
      <div class="col-12 col-lg-4">
        <div class="card border-0">
          <figure class="card-img-top m-0 overflow-hidden bsb-overlay-hover">
            <a href="#!">
              <img class="img-fluid bsb-scale bsb-hover-scale-up" loading="lazy" src="./assets/img/team-img-1.jpg" alt="">
            </a>
            <figcaption>
              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-eye text-white bsb-hover-fadeInLeft" viewBox="0 0 16 16">
                <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
                <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
              </svg>
              <h4 class="h6 text-white bsb-hover-fadeInRight mt-2">Read More</h4>
            </figcaption>
          </figure>
          <div class="card-body border bg-white p-4">
            <h2 class="card-title h4 fw-bold mb-3">Flora Nyra</h2>
            <p class="card-text text-secondary">Sed placerat luctus mi, mollis mattis nisl accumsan mollis.</p>
          </div>
          <div class="card-footer border border-top-0 bg-white p-4">
            <ul class="nav mb-0 bsb-nav-sep">
              <li class="nav-item text-secondary">
                <a class="nav-link link-secondary p-0 pe-3 d-inline-flex align-items-center" href="#!">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-lightbulb text-primary" viewBox="0 0 16 16">
                    <path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z" />
                  </svg>
                  <span class="ms-2 fs-6">Product Manager</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="card border-0">
          <figure class="card-img-top m-0 overflow-hidden bsb-overlay-hover">
            <a href="#!">
              <img class="img-fluid bsb-scale bsb-hover-scale-up" loading="lazy" src="./assets/img/team-img-3.jpg" alt="">
            </a>
            <figcaption>
              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-eye text-white bsb-hover-fadeInLeft" viewBox="0 0 16 16">
                <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
                <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
              </svg>
              <h4 class="h6 text-white bsb-hover-fadeInRight mt-2">Read More</h4>
            </figcaption>
          </figure>
          <div class="card-body border bg-white p-4">
            <h2 class="card-title h4 fw-bold mb-3">James Levi</h2>
            <p class="card-text text-secondary">Sed placerat luctus mi, mollis mattis nisl accumsan mollis.</p>
          </div>
          <div class="card-footer border border-top-0 bg-white p-4">
            <ul class="nav mb-0 bsb-nav-sep">
              <li class="nav-item text-secondary">
                <a class="nav-link link-secondary p-0 pe-3 d-inline-flex align-items-center" href="#!">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-layers text-primary" viewBox="0 0 16 16">
                    <path d="M8.235 1.559a.5.5 0 0 0-.47 0l-7.5 4a.5.5 0 0 0 0 .882L3.188 8 .264 9.559a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882L12.813 8l2.922-1.559a.5.5 0 0 0 0-.882l-7.5-4zm3.515 7.008L14.438 10 8 13.433 1.562 10 4.25 8.567l3.515 1.874a.5.5 0 0 0 .47 0l3.515-1.874zM8 9.433 1.562 6 8 2.567 14.438 6 8 9.433z" />
                  </svg>
                  <span class="ms-2 fs-6">Financial Analyst</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="card border-0">
          <figure class="card-img-top m-0 overflow-hidden bsb-overlay-hover">
            <a href="#!">
              <img class="img-fluid bsb-scale bsb-hover-scale-up" loading="lazy" src="./assets/img/team-img-2.jpg" alt="">
            </a>
            <figcaption>
              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-eye text-white bsb-hover-fadeInLeft" viewBox="0 0 16 16">
                <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
                <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
              </svg>
              <h4 class="h6 text-white bsb-hover-fadeInRight mt-2">Read More</h4>
            </figcaption>
          </figure>
          <div class="card-body border bg-white p-4">
            <h2 class="card-title h4 fw-bold mb-3">Taytum Elia</h2>
            <p class="card-text text-secondary">Sed placerat luctus mi, mollis mattis nisl accumsan mollis.</p>
          </div>
          <div class="card-footer border border-top-0 bg-white p-4">
            <ul class="nav mb-0 bsb-nav-sep">
              <li class="nav-item text-secondary">
                <a class="nav-link link-secondary p-0 pe-3 d-inline-flex align-items-center" href="#!">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-brush text-primary" viewBox="0 0 16 16">
                    <path d="M15.825.12a.5.5 0 0 1 .132.584c-1.53 3.43-4.743 8.17-7.095 10.64a6.067 6.067 0 0 1-2.373 1.534c-.018.227-.06.538-.16.868-.201.659-.667 1.479-1.708 1.74a8.118 8.118 0 0 1-3.078.132 3.659 3.659 0 0 1-.562-.135 1.382 1.382 0 0 1-.466-.247.714.714 0 0 1-.204-.288.622.622 0 0 1 .004-.443c.095-.245.316-.38.461-.452.394-.197.625-.453.867-.826.095-.144.184-.297.287-.472l.117-.198c.151-.255.326-.54.546-.848.528-.739 1.201-.925 1.746-.896.126.007.243.025.348.048.062-.172.142-.38.238-.608.261-.619.658-1.419 1.187-2.069 2.176-2.67 6.18-6.206 9.117-8.104a.5.5 0 0 1 .596.04zM4.705 11.912a1.23 1.23 0 0 0-.419-.1c-.246-.013-.573.05-.879.479-.197.275-.355.532-.5.777l-.105.177c-.106.181-.213.362-.32.528a3.39 3.39 0 0 1-.76.861c.69.112 1.736.111 2.657-.12.559-.139.843-.569.993-1.06a3.122 3.122 0 0 0 .126-.75l-.793-.792zm1.44.026c.12-.04.277-.1.458-.183a5.068 5.068 0 0 0 1.535-1.1c1.9-1.996 4.412-5.57 6.052-8.631-2.59 1.927-5.566 4.66-7.302 6.792-.442.543-.795 1.243-1.042 1.826-.121.288-.214.54-.275.72v.001l.575.575zm-4.973 3.04.007-.005a.031.031 0 0 1-.007.004zm3.582-3.043.002.001h-.002z" />
                  </svg>
                  <span class="ms-2 fs-6">Art Director</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- CSS Files -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/components/teams/team-2/assets/css/team-2.css" />
  • Use in personal projects
  • Customize the template files
  • Number of websites/domains
  • Create websites for clients
  • Remove footer credit link
  • Working PHP/AJAX contact form
  • Sass/SCSS Files
  • JS Source Files
  • Premium support via Email
  • Forum support
  • Free Updates
  • Access to all 5 Pro Templates
  • Access to all 34 Pro Components
  • Use in SaaS
  • Resell & Redistribute

BB Startup

Freelancer

$49

3 Months Access

5 Pro BS Templates

34 Pro BS Components

  • Use in personal projects
  • Customize the template files
  • Unlimited Number of websites/domains
  • Create websites for clients
  • Remove footer credit link
  • Working PHP/AJAX contact form
  • Sass/SCSS Files
  • JS Source Files
  • Premium support via Email
  • Forum support
  • 3 Months Free Updates
  • Access to all our 5 Pro Templates
  • Access to all our 34 Pro Components
  • Use in SaaS
  • Resell & Redistribute
Buy Now

BB Club

Agency

$149

12 Months Access

5 Pro BS Templates

34 Pro BS Components

  • Use in personal projects
  • Customize the template files
  • Unlimited Number of websites/domains
  • Create websites for clients
  • Remove footer credit link
  • Working PHP/AJAX contact form
  • Sass/SCSS Files
  • JS Source Files
  • Premium support via Email
  • Forum support
  • 12 Months Free Updates
  • Access to all our 5 Pro Templates
  • Access to all our 34 Pro Components
  • Use in SaaS
  • Resell & Redistribute
Buy Now

Bootstrap 5 Team Snippets

Browse our sleek Bootstrap snippets of team member sections. These Bootstrap team snippets will help you design your web project team pages.