→ Arturo
→ Minimal Team Section

Minimal Team Section

On hover reveal colors

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 bg-soft">
    <div class="container py-5">
        
        <div class="row justify-content-center text-center mb-5">
            <div class="col-lg-6">
                <div class="section-subtitle">Our Team</div>
                <h2 class="section-title">Meet the Experts</h2>
                <p class="text-muted">Working together to create exceptional experiences</p>
            </div>
        </div>

<div class="row g-4">
            
            <div class="col-lg-3 col-md-6">
                <div class="team-card h-100">
                    <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Team member" class="team-image w-100">
                    <div class="p-4">
                        <span class="role-tag">Founder</span>
                        <h5>Alexandra Chen</h5>
                        <p class="text-muted mb-4">Visionary leader with a passion for innovation and sustainable
                            growth.</p>
                        <div class="member-social d-flex">
                            <a href="#" class="social-link">LinkedIn</a>
                            <a href="#" class="social-link">Twitter</a>
                        </div>
                    </div>
                </div>
            </div>

<div class="col-lg-3 col-md-6">
                <div class="team-card h-100">
                    <img src="https://randomuser.me/api/portraits/men/63.jpg" alt="Team member" class="team-image w-100">
                    <div class="p-4">
                        <span class="role-tag">Design Lead</span>
                        <h5>Marcus Wright</h5>
                        <p class="text-muted mb-4">Creating beautiful, intuitive experiences that inspire and delight.
                        </p>
                        <div class="member-social d-flex">
                            <a href="#" class="social-link">LinkedIn</a>
                            <a href="#" class="social-link">Dribbble</a>
                        </div>
                    </div>
                </div>
            </div>

<div class="col-lg-3 col-md-6">
                <div class="team-card h-100">
                    <img src="https://randomuser.me/api/portraits/women/34.jpg" alt="Team member" class="team-image w-100">
                    <div class="p-4">
                        <span class="role-tag">Tech Lead</span>
                        <h5>Sarah Johnson</h5>
                        <p class="text-muted mb-4">Building robust solutions with cutting-edge technology.</p>
                        <div class="member-social d-flex">
                            <a href="#" class="social-link">LinkedIn</a>
                            <a href="#" class="social-link">GitHub</a>
                        </div>
                    </div>
                </div>
            </div>

<div class="col-lg-3 col-md-6">
                <div class="team-card h-100">
                    <img src="https://randomuser.me/api/portraits/men/14.jpg" alt="Team member" class="team-image w-100">
                    <div class="p-4">
                        <span class="role-tag">Strategy</span>
                        <h5>David Kim</h5>
                        <p class="text-muted mb-4">Driving growth through strategic planning and market analysis.</p>
                        <div class="member-social d-flex">
                            <a href="#" class="social-link">LinkedIn</a>
                            <a href="#" class="social-link">Twitter</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

More Examples

Team Section with Bootstrap 5

Author:
Arturo

1 year ago

3.9k

v.5.3
Bootstrap tabs
tab navigation

Author:
Anonymous

1 year ago

1.6k

v.5.3
siam footer
footer

Author:
MD Siam Miya

1 month ago

241

v.4.6
Product detail page bootstrap

Author:
Reza Farhadi

1 year ago

5.4k

v.5.3
Rotating Navigation Animation
Rotating Navigation Animation

Author:
Rami AlAjo

1 year ago

2.4k

v.4.6
Gallery #1

Author:
java stories story

11 months ago

2.4k

v.5.3
Elegant Product Showcase Component

Author:
Anonymous

1 year ago

2.3k

v.5.3
Animated Pricing Card with Bootstrap 5

Author:
Reza Farhadi

1 year ago

1.2k

v.5.3
Services list

Author:
Gana JNsksk

1 month ago

330

v.4.6
Clean Timeline Changelog
clean and beautiful changelog example

Author:
Alaric Sloane

1 year ago

3.3k

v.5.3
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

10.2k

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

Author:
Omar Khaled

1 year ago

3k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent