Profile

PHW

This bootstrap css example is contributed by Delaino Barris (DB Graphic), on 05-Feb-2026. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Card

Author Delaino Barris (DB Graphic)

115

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>
	
	</html>

More Examples

for me
A modern and visually appealing card component with a gradient background and hover effect.

Author:
Jimmy Mercury

1 year ago

1.7k

v.5.3
Music speakers status

Author:
Jonathan

10 months ago

908

v.5.3
Interactive Team Member Card with Flip Effect

Author:
Reza Farhadi

1 year ago

4k

v.5.3
bootstrap-dashboard

Author:
Joey "Manny" Torres

1 year ago

1.1k

v.5.3
card

Author:
Awais Farman

2 months ago

184

v.5.3
Contact Us Page with Google Maps and Form Validation
HTML: Form Fields: Includes fields for name, email, and message. Google Map: A div with an id of map where the Google Map will be displayed. Feedback Elements: <div> elements for displaying validation messages and success messages. CSS: Styling: Adds padding for the contact section, sets the map height, and styles feedback and success messages. JavaScript: Google Maps Initialization: Uses the Google Maps JavaScript API to create and display a map centered at specified coordinates. Replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key. Form Validation: Validates the input fields and displays appropriate messages if the input is invalid or missing. How to Use: Replace API Key: Insert your Google Maps API key in the script tag for Google Maps. Customize Coordinates: Update the latitude and longitude in the initMap function to reflect your actual location. Validation Rules: Customize validation logic as needed for your form requirements.

Author:
zobaidul kaziex

1 year ago

7.8k

v.4.6
Split Landing Page
Split Landing Page

Author:
Rami AlAjo

1 year ago

1.5k

v.4.6
Product Card
A product card layout for an e-commerce website with an image at the top

Author:
Juan Martinez

1 year ago

16.4k

v.5.3
Kategori Produk

Author:
java stories story

5 months ago

1.5k

v.5.3
Featured Product Card

Author:
Prajwal Hallale

1 year ago

2.7k

v.5.3
featured product

Author:
Juan Antonio González Hernández

3 days ago

24

v.4.6
Sound Board
Sound Board

Author:
Rami AlAjo

1 year ago

1.4k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent