about page

This bootstrap css example is contributed by Md. Hasibur Rahman, on 10-Jul-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Card Input

Author Md. Hasibur Rahman

144

v.4.6

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>About | Rakib - Web Designer & Developer</title>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
    <div class="container">
      <a class="navbar-brand fw-bold" href="index.html">Rakib<span class="text-primary">.</span></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="mainNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
          <li class="nav-item"><a class="nav-link active" href="about.html">About</a></li>
          <li class="nav-item"><a class="nav-link" href="portfolio.html">Portfolio</a></li>
          <li class="nav-item"><a class="nav-link" href="service.html">Service</a></li>
          <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

<div class="page-title-banner">
    <div class="container">
      <h1 class="fw-bold">About Me</h1>
      <p class="mb-0">Home / About</p>
    </div>
  </div>

<section>
    <div class="container">
      <div class="row align-items-center g-5">
        <div class="col-md-5">
          <img src="https://placehold.co/500x400?text=My+Photo" class="img-fluid rounded-photo" alt="Biography" />
        </div>
        <div class="col-md-7">
          <span class="eyebrow">Get To Know Me</span>
          <h2 class="fw-bold mb-3 mt-2">Personal Biography</h2>
          <p>
            My name is Rakib. I completed my Web Design and Development
            course under NSDA (National Skills Development Authority),
            where I learned HTML, CSS, JavaScript, and Bootstrap.
          </p>
          <p>
            I am passionate about building simple, clean, and responsive
            websites, and I am currently building my career as a
            freelance front-end developer.
          </p>
          <ul class="list-unstyled">
            <li><strong>Location:</strong> Dhaka, Bangladesh</li>
            <li><strong>Email:</strong> rakib@example.com</li>
            <li><strong>Availability:</strong> Freelance / Full-time</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

<section class="bg-light-alt">
    <div class="container">
      <div class="section-title">
        <span class="eyebrow">Trusted By</span>
        <h2>Existing Clients</h2>
        <p>Businesses I have worked with</p>
      </div>
      <div class="row g-5 text-center align-items-center">
        <div class="col-6 col-md-2">
          <img src="https://placehold.co/150x80?text=Client+1" class="img-fluid" alt="Client 1" />
        </div>
        <div class="col-6 col-md-2">
          <img src="https://placehold.co/150x80?text=Client+2" class="img-fluid" alt="Client 2" />
        </div>
        <div class="col-6 col-md-2">
          <img src="https://placehold.co/150x80?text=Client+3" class="img-fluid" alt="Client 3" />
        </div>
        <div class="col-6 col-md-2">
          <img src="https://placehold.co/150x80?text=Client+4" class="img-fluid" alt="Client 4" />
        </div>
        <div class="col-6 col-md-2">
          <img src="https://placehold.co/150x80?text=Client+5" class="img-fluid" alt="Client 5" />
        </div>
        <div class="col-6 col-md-2">
          <img src="https://placehold.co/150x80?text=Client+6" class="img-fluid" alt="Client 6" />
        </div>
      </div>
    </div>
  </section>

<section>
    <div class="container">
      <div class="section-title">
        <span class="eyebrow">Expertise</span>
        <h2>My Skills</h2>
        <p>Technical skills and proficiency</p>
      </div>

<div class="mb-3">
        <div class="d-flex justify-content-between">
          <span>JavaScript</span><span>80%</span>
        </div>
        <div class="progress" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-warning" style="width: 80%"></div>
        </div>
      </div>

<div class="mb-3">
        <div class="d-flex justify-content-between">
          <span>Bootstrap</span><span>90%</span>
        </div>
        <div class="progress" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-success" style="width: 90%"></div>
        </div>
      </div>
    </div>
  </section>

<footer class="bg-dark text-light pt-5 pb-3">
    <div class="container">
      <div class="row">
        <div class="col-md-4 mb-3">
          <h5>Rakib.</h5>
          <p class="small">Web Designer & Front-End Developer based in Dhaka, Bangladesh.</p>
        </div>
        <div class="col-md-4 mb-3">
          <h5>Quick Links</h5>
          <ul class="list-unstyled">
            <li><a href="index.html" class="footer-link">Home</a></li>
            <li><a href="about.html" class="footer-link">About</a></li>
            <li><a href="portfolio.html" class="footer-link">Portfolio</a></li>
            <li><a href="service.html" class="footer-link">Service</a></li>
            <li><a href="contact.html" class="footer-link">Contact</a></li>
          </ul>
        </div>
        <div class="col-md-4 mb-3">
          <h5>Date & Time</h5>
          <p id="liveDateTime" class="small">--</p>
        </div>
      </div>
      <hr class="border-secondary" />
      <p class="text-center mb-0 small">&copy; 2026 Rakib. All Rights Reserved.</p>
    </div>
  </footer>

More Examples

E-Commerce Full

Author:
Zahid Hasan Riyad

1 month ago

418

v.5.3
Sound Board
Sound Board

Author:
Rami AlAjo

1 year ago

2k

v.4.6
Elon Musk 4
Service Page 4

Author:
RAHAT RAHMAN OFICIAL

4 months ago

303

v.4.6
Featured Product Card

Author:
Prajwal Hallale

2 years ago

3.8k

v.5.3
vulgh

Author:
Anonymous

1 month ago

218

v.5.3
User Profile Card with Social Icons using Bootstrap 5

Author:
Anonymous

1 year ago

8.2k

v.5.3
contact page

Author:
Md. Hasibur Rahman

2 months ago

252

v.5.3
contact from
do not copy

Author:
Fitar Ahmed

4 months ago

809

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

Author:
Jimmy Mercury

1 year ago

2.1k

v.5.3
Our Clients Section

Author:
Shahriar Noyon

4 months ago

387

v.4.6
my purpose

Author:
Gana JNsksk

4 months ago

562

v.4.6
E-Commerce Cart Section

Author:
Creative Araf

2 months ago

234

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent