→ Nguyen Minh
→ User Profile Card with Bootstrap 5

User Profile Card with Bootstrap 5

This bootstrap css example is contributed by Nguyen Minh, on 18-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are Author box, User information

Tags: Profile

Author Nguyen Minh

2.4k

v.5.3

Fork Fullscreen

<div class="bg-light">
    <div class="container d-flex justify-content-center align-items-center" style="min-height: 100vh;">
        <div class="card profile-card shadow  mt-4">
            <div class="card-body text-center">
                <img src="https://via.placeholder.com/150" alt="User Profile" class="rounded-circle profile-img mb-3">
                <h3 class="card-title mb-0">John Doe</h3>
                <p class="text-muted">Web Developer</p>
                <p class="card-text">Passionate web developer with 5 years of experience in creating responsive and
                    user-friendly websites.</p>

<ul class="list-group list-group-flush mb-3">
                    <li class="list-group-item bg-transparent">
                        <i class="bi bi-envelope-fill me-2"></i>john.doe@example.com
                    </li>
                    <li class="list-group-item bg-transparent"><i class="bi bi-geo-alt-fill me-2"></i>New York, USA</li>
                    <li class="list-group-item bg-transparent"><i class="bi bi-briefcase-fill me-2"></i>TechCorp Inc.
                    </li>
                </ul>

<div class="d-flex justify-content-between text-center mt-4">
                    <div>
                        <h5 class="mb-0">1.5k</h5>
                        <small class="text-muted">Followers</small>
                    </div>
                    <div>
                        <h5 class="mb-0">120</h5>
                        <small class="text-muted">Projects</small>
                    </div>
                    <div>
                        <h5 class="mb-0">4.8</h5>
                        <small class="text-muted">Rating</small>
                    </div>
                </div>

<button class="btn btn-primary w-100 mt-4">Connect</button>
            </div>
        </div>
    </div>
</div>

More Examples

Profile card
Profile card with images and buttons

Author:
Anonymous

9 months ago

2.2k

v.4.6
Professional Staff Profile Cards with Social Integration

Author:
Isaac Winslow

1 month ago

562

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

9 months ago

2.3k

v.5.3
Author box
minimal author box with author image

Author:
Kemaya m

8 months ago

367

v.4.6
Profile Management Dashboard
profile management interface with personal information, security settings, and activity tracking in a modern design

Author:
Isaac Winslow

1 month ago

715

v.5.3
Interactive Team Member Card with Flip Effect

Author:
Reza Farhadi

3 months ago

341

v.5.3
User profile card
Responsive author card

Author:
Anonymous

1 month ago

662

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

Author:
Anonymous

2 months ago

1.4k

v.5.3
Bootstrap user profile
User profile card made with bootstrap

Author:
Anonymous

4 days ago

119

v.5.3
Simple portfolio card

Author:
Maria Garcia

5 months ago

261

v.5.3
Bootstrap homepage with background color, hover effects, animations, and shadows added to enhance the design
Features Added: Background Gradient: A smooth gradient background using linear-gradient. Card Shadow and Hover Effect: The card now lifts up with a shadow (box-shadow) and smooth transition (transform) on hover. Button Customization: A custom round button with hover color change. Animation: The card content animates with a "fade-in-up" effect using keyframe animation.

Author:
zobaidul kaziex

3 months ago

1k

v.4.6
Activity Logs Dashboard
activity logs component with timeline visualization, export functionality, and detailed event tracking in Bootstrap 5.3.

Author:
Isaac Winslow

1 month ago

493

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent