→ Gana JNsksk
→ Personl Details

Personl Details

This bootstrap css example is contributed by Gana JNsksk, on 14-May-2026. Component is made with bootstrap css v.4.6. It is responsive. similar terms for this example is blog template

Tags: Blog

Author Gana JNsksk

240

v.4.6

Fork Fullscreen

<section class="info-section">
    <div class="container">
        <div class="row align-items-center">
            
            <div class="col-lg-5 mb-5 mb-lg-0 text-center">
                <div class="profile-frame d-inline-block shadow-sm">
                    <img src="https://images.pexels.com/photos/8217533/pexels-photo-8217533.jpeg" alt="Profile" class="img-fluid">
                </div>
            </div>

<div class="col-lg-7 ps-lg-5">
                <h6 class="text-primary fw-bold text-uppercase mb-2">Identification</h6>
                <h2 class="display-6 fw-bold mb-4">Personal Details</h2>
                
                <div class="row">
                    
                    <div class="col-md-6">
                        <div class="info-list-item">
                            <div class="info-icon">
                                <i class="bi bi-person-fill"></i>
                            </div>
                            <div>
                                <p class="info-label">Name</p>
                                <p class="info-value">Your Full Name</p>
                            </div>
                        </div>

<div class="info-list-item">
                            <div class="info-icon">
                                <i class="bi bi-envelope-at-fill"></i>
                            </div>
                            <div>
                                <p class="info-label">Email</p>
                                <p class="info-value">hello@example.com</p>
                            </div>
                        </div>

<div class="info-list-item">
                            <div class="info-icon">
                                <i class="bi bi-geo-alt-fill"></i>
                            </div>
                            <div>
                                <p class="info-label">Location</p>
                                <p class="info-value">Your City, Country</p>
                            </div>
                        </div>
                    </div>

<div class="col-md-6">
                        <div class="info-list-item">
                            <div class="info-icon">
                                <i class="bi bi-calendar-check-fill"></i>
                            </div>
                            <div>
                                <p class="info-label">Availability</p>
                                <p class="info-value">Full-time / Freelance</p>
                            </div>
                        </div>

<div class="info-list-item">
                            <div class="info-icon">
                                <i class="bi bi-translate"></i>
                            </div>
                            <div>
                                <p class="info-label">Languages</p>
                                <p class="info-value">English, Bengali</p>
                            </div>
                        </div>

<div class="info-list-item">
                            <div class="info-icon">
                                <i class="bi bi-globe"></i>
                            </div>
                            <div>
                                <p class="info-label">Website</p>
                                <p class="info-value">www.photohub.com</p>
                            </div>
                        </div>
                    </div>
                </div>

<div class="mt-4 d-flex gap-3">
                    <a href="#" class="btn btn-outline-dark btn-sm"><i class="bi bi-github me-1"></i> Github</a>
                    <a href="#" class="btn btn-outline-primary btn-sm"><i class="bi bi-linkedin me-1"></i> LinkedIn</a>
                </div>
            </div>
        </div>
    </div>
</section>

More Examples

about me gana

Author:
Gana JNsksk

2 months ago

593

v.4.6
Personl

Author:
Gana JNsksk

1 month ago

243

v.4.6
Blog template

Author:
Riz Mohammad

1 year ago

3.1k

v.5.3
Responsive blog home layout

Author:
Juniper

1 year ago

3.1k

v.5.3
A Bootstrap Playground
TBD

Author:
Pranjal Adhikari

1 year ago

1k

v.4.6
Blog post layout
Minimal and clean blog post layout

Author:
Juniper

1 year ago

4.3k

v.5.3
Profile card
Profile card with images and buttons

Author:
Anonymous

2 years ago

9k

v.4.6
skill info

Author:
Gana JNsksk

1 month ago

265

v.4.6
Navbar

Author:
Ad Apon7

2 months ago

541

v.5.3
Bento grid bootstrap

Author:
Anonymous

1 year ago

2.2k

v.5.3
Contact form

Author:
DOLA AKTER

1 month ago

746

v.4.6
Notification alert
notification alert bootstrapt 5.3 # alert-imessage Alert message custom on bootstrap 5.3 # Example calls JS // imessage.show("Default Success!", "success"); // imessage.show("Top Center Message!", "info", "top-center"); // imessage.show("Bottom Right Warning!", "warning", "bottom-right"); // imessage.show("Bottom Left Error!", "fail", "bottom-left"); // imessage.show("Centered Notification!", "info", "center");

Author:
StarCode Kh

1 year ago

3k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent