→ 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

1.3k

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

6 months ago

917

v.5.3
User Profile Card with Social Icons using Bootstrap 5

Author:
Anonymous

8 months ago

4.9k

v.5.3
Social media buttons
Beautiful and simple social media buttons

Author:
Maria Garcia

11 months ago

2.7k

v.5.3
Sidebar navigation with toggle button

Author:
Moana silva

11 months ago

4.2k

v.5.3
Footer with social media icons

Author:
Omar Khaled

9 months ago

4k

v.5.3
Interactive Shop Catalog Layout
shopping interface with wishlist functionality and dynamic filtering

Author:
Mason Ashford

7 months ago

3.5k

v.5.3
Minimal breadcrumb

Author:
Anonymous

11 months ago

721

v.5.3
Blog template

Author:
Riz Mohammad

11 months ago

2k

v.5.3
HTML and Bootstrap for Registration Form
HTML: Personal Information Section: Includes fields for full name, email, date of birth, bio, and profile image. Company Information Section: Includes fields for company name, company size (using a dropdown), and location. Submit Button: A button to submit the form. CSS: Background Gradient: Applied to the body. Card Styling: Styled with rounded corners and padding. Button Styling: Custom colors for the submit button. Validation Styling: Highlight invalid fields and display error messages. JavaScript: Validation Logic: Checks if required fields are filled and updates the feedback area with error or success messages. Dynamic Feedback: Updates the form with success or error messages based on validation.

Author:
zobaidul kaziex

9 months ago

5.3k

v.4.6
HTML, CSS, and Bootstrap. This approach will be purely HTML and CSS without any JavaScript.
HTML: Bootstrap Integration: Linked to Bootstrap CDN for styling. Form Structure: Contains input fields for name, email, and message, all within a card component. CSS: Background Gradient: Applied to the body for a visually appealing background. Card Styling: Rounded corners and padding for the card. Button Styling: Custom colors for the submit button, including hover effects. How to Use: Create an index.html file and copy the above code into it. Open the HTML file in your web browser to view the Contact Us form.

Author:
zobaidul kaziex

9 months ago

1.2k

v.4.6
Clean Modern Footer Design with Social Media
Elegant light-themed footer with interactive elements, newsletter signup, and social media integration built with Bootstrap 5.3.

Author:
Isaac Winslow

7 months ago

2.7k

v.5.3
Author box
minimal author box with author image

Author:
Kemaya m

1 year ago

1.2k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent