→ Shahriar Noyon
→ Personal Biography Section

Personal Biography 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.

Tags: Card

Author Shahriar Noyon

108

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">
 
 
  <section class="bio-section">
    <div class="container">
      <div class="row align-items-center g-5">

<div class="col-lg-5">
          <div class="bio-card">
            <div class="bio-image">
              <img
                src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e"
                alt="Profile Image"
              />
            </div>
          </div>
        </div>

<div class="col-lg-7">
          <div class="bio-card">
            <div class="bio-content">

<p class="bio-subtitle">Personal Biography</p>

<h1 class="bio-title">
                Hi, I'm <span>John Anderson</span>
              </h1>

<p class="bio-text">
                I'm a passionate UI/UX Designer and Front-End Developer
                with over 5 years of experience creating modern,
                user-friendly digital experiences. I love crafting clean
                and interactive websites that combine creativity with
                functionality.
              </p>

<div class="info-box">
                  <h6>Email</h6>
                  <p>john@example.com</p>
                </div>

<div class="info-box">
                  <h6>Location</h6>
                  <p>Dhaka, Bangladesh</p>
                </div>

<div class="info-box">
                  <h6>Experience</h6>
                  <p>5+ Years</p>
                </div>

</div>

<a href="#" class="btn-custom">
                Download CV
              </a>

</div>
          </div>
        </div>

</div>
    </div>
  </section>

More Examples

Glowing Card
glowing effect and smooth hover animation

Author:
Prajwal Hallale

2 years ago

4.2k

v.5.3
service list
do not copy

Author:
Fitar Ahmed

3 weeks ago

44

v.4.6
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

8.2k

v.4.6
Card w/ gradient background
A modern and visually appealing card component with a gradient background and hover effect.

Author:
Prajwal Hallale

2 years ago

4.8k

v.5.3
Client

Author:
Gana JNsksk

4 weeks ago

94

v.4.6
Services list

Author:
Gana JNsksk

4 weeks ago

96

v.4.6
Bootstrap Product Card

Author:
Anonymous

1 year ago

4.8k

v.5.3
Our Clients Section

Author:
Shahriar Noyon

3 weeks ago

47

v.4.6
Map Section

Author:
Tanvir fahad

4 weeks ago

58

v.4.6
Our Existing Clients Section

Author:
Shahriar Noyon

3 weeks ago

126

v.4.6
Sound Board
Sound Board

Author:
Rami AlAjo

1 year ago

1.6k

v.4.6
Personal Info Section

Author:
Tanvir fahad

3 weeks ago

78

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent