→ 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

2.5k

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

10 months ago

1.6k

v.5.3
FAQ accordion
The accordion component is a vertically stacked set of items

Author:
Prajwal Hallale

1 year ago

4.8k

v.5.3
Card with background image

Author:
Nicholas

1 year ago

3k

v.4.6
Responsive footer using HTML and Bootstrap:
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects. How to Use: Create an error.html file and paste the above code into it. Place the error.html file in your web server’s error pages directory or configure your server to serve this file on error.

Author:
zobaidul kaziex

1 year ago

7.6k

v.4.6
Image slider
Image slider with auto-scrolling and with title and description

Author:
Anonymous

1 year ago

5.4k

v.5.3
Footer
Simple footer with social icons

Author:
Anonymous

4 months ago

1.5k

v.5.3
Contact card
Company contact card with email, contact number, and social links

Author:
Mateo Rojas

10 months ago

7.3k

v.5.3
Newsletter CTA Section with Bootstrap 5
Clean and elegant Newsletter form

Author:
Anonymous

1 year ago

1.9k

v.5.3
Glowing Card
glowing effect and smooth hover animation

Author:
Prajwal Hallale

1 year ago

2.9k

v.5.3
Search section with category filter

Author:
Mateo Rojas

10 months ago

5.1k

v.5.3
Copy Code Section
Code block with working copy option

Author:
Kemaya m

1 year ago

2.5k

v.5.3
Testimonial carousel

Author:
Sofia Petrova

1 year ago

1.8k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent