→ Shahriar Noyon
→ Personal Information Section

Personal Information Section

This bootstrap css example is contributed by Shahriar Noyon, on 15-May-2026. Component is made with bootstrap css v.4.6. It is responsive. similar terms for this example are Get in touch, Contact form

Tags: Contact us

Author Shahriar Noyon

544

v.4.6

Fork Fullscreen

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

<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

Get in Touch form

Author:
Mateo Rojas

1 year ago

3.2k

v.5.3
contect us

Author:
Huryra

1 month ago

121

v.4.6
E-Commarce

Author:
Anonymous

1 month ago

240

v.5.3
Elon musk last 5
contact page 5

Author:
RAHAT RAHMAN OFICIAL

4 months ago

339

v.4.6
vulgh

Author:
Anonymous

1 month ago

210

v.5.3
E-Commerce Full

Author:
Zahid Hasan Riyad

1 month ago

412

v.5.3
E-Commerce Contact Section

Author:
Creative Araf

2 months ago

219

v.5.3
Get In Touch Form Example
Contact us form

Author:
Anonymous

1 year ago

2.7k

v.5.3
Parsonal PortFolio Full WebSite

Author:
Zahid Hasan Riyad

1 month ago

319

v.5.3
Contact form

Author:
DOLA AKTER

4 months ago

846

v.4.6
fitar container
do noty copy

Author:
Fitar Ahmed

4 months ago

799

v.4.6
Contact Us

Author:
istiakahmedchowdhury10

1 month ago

125

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent