→ 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

294

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

Liberation War Archive - Home

Author:
web.asset.edu

3 weeks ago

146

v.5.3
Portfolio About

Author:
Code Bro io

2 weeks ago

46

v.5.3
Liberation War Archive - Documents

Author:
web.asset.edu

3 weeks ago

195

v.5.3
personal biography

Author:
Huryra

1 week ago

74

v.4.6
Service Page

Author:
Code Bro io

2 weeks ago

56

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

Author:
Juniper

1 year ago

4.4k

v.5.3
Plant Store About Page

Author:
Code Bro io

2 weeks ago

46

v.5.3
A Bootstrap Playground
TBD

Author:
Pranjal Adhikari

1 year ago

1k

v.4.6
Working

Author:
istiakahmedchowdhury10

1 week ago

56

v.4.6
Restaurant Menu Page

Author:
Code Bro io

2 weeks ago

102

v.5.3
Personl

Author:
Gana JNsksk

2 months ago

271

v.4.6
Restaurant About

Author:
Code Bro io

2 weeks ago

50

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent