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

129

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

3 weeks ago

249

v.5.3
Sound Board
Sound Board

Author:
Rami AlAjo

1 year ago

1.9k

v.4.6
Special Skills

Author:
Shahriar Noyon

3 months ago

335

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.8k

v.4.6
Skill Section with Progress Bar
This is a responsive skill section built with Bootstrap and external CSS. It shows different skills with progress bars like HTML, CSS, Bootstrap and JavaScript.

Author:
Happy Khatun

3 months ago

467

v.4.6
Product card component using Bootstrap 5

Author:
Mateo Rojas

1 year ago

3.2k

v.5.3
E- Commarce full website

Author:
Zahid Hasan Riyad

3 weeks ago

140

v.5.3
test

Author:
Anonymous

6 months ago

353

v.5.3
Home Page of portfolio (WDD)

Author:
sajid taz

2 months ago

532

v.4.6
Carrousel banner product
It's a carousel; clicking on its categories opens a banner with the product.

Author:
Juan Antonio González Hernández

5 months ago

1.2k

v.5.3
Our Clients

Author:
Shahriar Noyon

3 months ago

466

v.4.6
HTML and Bootstrap for Registration Form
HTML: Personal Information Section: Includes fields for full name, email, date of birth, bio, and profile image. Company Information Section: Includes fields for company name, company size (using a dropdown), and location. Submit Button: A button to submit the form. CSS: Background Gradient: Applied to the body. Card Styling: Styled with rounded corners and padding. Button Styling: Custom colors for the submit button. Validation Styling: Highlight invalid fields and display error messages. JavaScript: Validation Logic: Checks if required fields are filled and updates the feedback area with error or success messages. Dynamic Feedback: Updates the form with success or error messages based on validation.

Author:
zobaidul kaziex

1 year ago

9.2k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent