→ 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

944

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

4 months ago

748

v.5.3
Sticky Table Headings Example

Author:
Anonymous

1 day ago

48

v.5.3
Service Cards with Hover Effects
service showcase component featuring neuromorphic design cards with smooth hover effects, gradient accents, and responsive layout.

Author:
Alaric Sloane

6 months ago

1.4k

v.5.3
Bootstrap Product Card

Author:
Anonymous

9 months ago

1.8k

v.5.3
Newsletter Form
Rounded newsletter form

Author:
Ross Wille

9 months ago

1.8k

v.5.3
Hidden Search Widget
Hidden Search Widget

Author:
Rami AlAjo

2 months ago

462

v.4.6
Team Section with Bootstrap 5

Author:
Arturo

4 months ago

944

v.5.3
Login with Twitter button bootstrap
Twitter (now known as X) Sign-in Button

Author:
Omar Khaled

9 months ago

1.8k

v.5.3
Pricing Cards
Three pricing tiers (Basic, Pro, and Enterprise) using Bootstrap's card component.

Author:
Sofia Petrova

9 months ago

1k

v.5.3
Simple toast messages example
Four different types of toasts: Success (green) Error (red) Warning (yellow) Info (blue) Auto-dismisses after 3 seconds

Author:
Ankit khedkar

4 months ago

698

v.5.3
Clean Commerce Cart Design
A sleek shopping cart interface with quantity controls and real-time order summary

Author:
Mason Ashford

5 months ago

2.7k

v.5.3
Testimonial carousel

Author:
Anonymous

5 months ago

517

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent