→ Arturo
→ Team Section with Bootstrap 5

Team Section with Bootstrap 5

This bootstrap css example is contributed by Arturo, on 22-Dec-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Team

Author Arturo

216

v.5.3

Fork Fullscreen

<section class="py-5">
    <div class="container">
        
        <div class="row text-center mb-5">
            <div class="col-12">
                <h2 class="section-title">Meet Our Team</h2>
                <p class="text-muted">Dedicated professionals working together to achieve excellence</p>
            </div>
        </div>

<div class="row g-4">
            
            <div class="col-lg-3 col-md-6">
                <div class="team-member text-center p-4">
                    <img src="https://randomuser.me/api/portraits/women/64.jpg" alt="Team Member 1" class="mb-4 shadow">
                    <h5 class="mb-1">Sarah Johnson</h5>
                    <p class="text-muted mb-3">CEO & Founder</p>
                    <p class="small mb-3">Leading our company's vision and strategy with over 15 years of
                        experience.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                    </div>
                </div>
            </div>

<div class="col-lg-3 col-md-6">
                <div class="team-member text-center p-4">
                    <img src="https://randomuser.me/api/portraits/men/64.jpg" alt="Team Member 2" class="mb-4 shadow">
                    <h5 class="mb-1">Michael Chen</h5>
                    <p class="text-muted mb-3">Tech Lead</p>
                    <p class="small mb-3">Driving innovation and technical excellence in all our projects.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-github"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                    </div>
                </div>
            </div>

<div class="col-lg-3 col-md-6">
                <div class="team-member text-center p-4">
                    <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Team Member 3" class="mb-4 shadow">
                    <h5 class="mb-1">Emily Martinez</h5>
                    <p class="text-muted mb-3">Design Director</p>
                    <p class="small mb-3">Creating beautiful and intuitive designs that users love.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-dribbble"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>

<div class="col-lg-3 col-md-6">
                <div class="team-member text-center p-4">
                    <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Team Member 4" class="mb-4 shadow">
                    <h5 class="mb-1">David Wilson</h5>
                    <p class="text-muted mb-3">Marketing Manager</p>
                    <p class="small mb-3">Developing strategies that connect our brand with audiences.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

More Examples

Minimal Team Section
On hover reveal colors

Author:
Arturo

1 month ago

182

v.5.3
Login modal

Author:
Prajwal Hallale

10 months ago

3.6k

v.4.6
404 page template
with an animated illustration and a button to redirect to the homepage

Author:
karia

10 months ago

631

v.5.3
Password Reset Form
Multi-step password reset form with email verification, code validation, and password strength meter built with Bootstrap 5.3.

Author:
Isaac Winslow

2 months ago

843

v.4.6
Search bar with search icon in bootstrap 5

Author:
Juniper

3 months ago

795

v.5.3
FAQ example with bootstrap 4
Simple Frequently Asked Questions section

Author:
Moana silva

6 months ago

478

v.4.6
Professional Bootstrap Pricing Table
Beautiful pricing component built with Bootstrap 5.3, featuring interactive hover effects, mobile-responsive layout, and professional design elements.

Author:
Mason Ashford

2 months ago

344

v.5.3
Hero Section with Animations
Interactive hero section with animated elements, key statistics, and modern styling

Author:
Isaac Winslow

2 months ago

847

v.5.3
Elegant Profile Card
showcasing user or team member profiles in a professional and visually appealing manner. The profile card includes an avatar, name, position, and a short bio, along with social media icons for easy connectivity

Author:
Prajwal Hallale

10 months ago

3.3k

v.5.3
Minimal Changelog Page Template design

Author:
Asmath

1 month ago

946

v.5.3
Bootstrap tabs
tab navigation

Author:
Anonymous

9 months ago

1.7k

v.5.3
Pulsing Button

Author:
Prajwal Hallale

10 months ago

657

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent