Elon Musk 2

hero to last home

This bootstrap css example is contributed by RAHAT RAHMAN OFICIAL, on 14-May-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Hero

Author RAHAT RAHMAN OFICIAL

535

v.4.6

Fork Fullscreen

<section class="w-100% banner_hero">
      <div class="container"></div>
      <div id="carouselExample" class="carousel slide">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="./images/hero.jpg" class="d-block w-100" alt="..." />
          </div>
          <div class="carousel-item">
            <img src="./images/hero.jpg" class="d-block w-100" alt="..." />
          </div>
          <div class="carousel-item">
            <img src="./images/hero.jpg" class="d-block w-100" alt="..." />
          </div>
        </div>
        <button
          class="carousel-control-prev"
          type="button"
          data-bs-target="#carouselExample"
          data-bs-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button
          class="carousel-control-next"
          type="button"
          data-bs-target="#carouselExample"
          data-bs-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </section>

<section class="about-section py-5">
      <div class="container">
        <div class="row align-items-center">
          
          <div class="col-md-5 text-center mb-4 mb-md-0">
            <img
              src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e"
              alt="Profile"
              class="img-fluid about-img"
            />
          </div>

<div class="col-md-7">
            <h2 class="fw-bold mb-3">About Me</h2>

<p class="text-muted">
              Hey, I'm a web development learner passionate about creating clean
              and modern websites using HTML, CSS, Bootstrap, and JavaScript.
            </p>

<p class="text-muted">
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. A
              eligendi harum dolore doloribus sunt ratione ullam, aperiam aut,
              blanditiis veniam illo. Qui corporis inventore obcaecati fugiat
              vero deleniti soluta in quibusdam assumenda doloribus, at aut ut
              pariatur quam! Dolorem modi officiis, eum iusto rem est.
            </p>

<button class="btn btn-dark mt-2">Learn More</button>
          </div>
        </div>
      </div>
    </section>

<section class="mission-section py-5">
      <div class="container">
        <div class="text-center mb-5">
          <h2 class="fw-bold">Career Mission & Vision</h2>
          <p class="text-muted">My goals and future plans as a developer.</p>
        </div>

<div class="row g-4">
          
          <div class="col-md-6">
            <div class="mission-box h-100">
              <h4 class="mt-3">Mission</h4>

<p class="text-muted">
                My mission is to become a skilled full-stack web developer and
                build clean, responsive, and user-friendly websites.
              </p>
            </div>
          </div>

<div class="col-md-6">
            <div class="mission-box h-100">
              <h4 class="mt-3">Vision</h4>

<p class="text-muted">
                My vision is to work on real-world projects, grow in the tech
                industry, and create impactful digital solutions.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

<section class="services-section py-5">
      <div class="container">
        <div class="text-center mb-5">
          <h2 class="fw-bold">My Services</h2>
          <p class="text-muted">
            Services I can provide as a frontend developer.
          </p>
        </div>

<h4 class="mt-3">Web Design</h4>

<p class="text-muted">
                Modern and responsive website layouts using HTML, CSS, and
                Bootstrap.
              </p>
            </div>
          </div>

<div class="col-md-4">
            <div class="service-box text-center">
              <i class="bi bi-phone service-icon"></i>

<h4 class="mt-3">Responsive Design</h4>

<p class="text-muted">
                Mobile-friendly websites that work smoothly on all devices.
              </p>
            </div>
          </div>

<div class="col-md-4">
            <div class="service-box text-center">
              <i class="bi bi-palette service-icon"></i>

<h4 class="mt-3">UI Design</h4>

<p class="text-muted">
                Clean and attractive user interface design with modern styling.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

<section class="feedback-section py-5">
      <div class="container">
        <div class="text-center mb-5">
          <h2 class="fw-bold">Client Feedback</h2>
          <p class="text-muted">What clients say about my work.</p>
        </div>

<div class="row g-4">
          
          <div class="col-md-4">
            <div class="feedback-box">
              <p class="text-muted">
                "Very professional and clean design. The website looks amazing!"
              </p>

<h5 class="mt-3 mb-0">John Smith</h5>
              <small class="text-secondary">Business Owner</small>
            </div>
          </div>

<div class="col-md-4">
            <div class="feedback-box">
              <p class="text-muted">
                "Responsive design was perfect and delivery was super fast."
              </p>

<h5 class="mt-3 mb-0">Sarah Khan</h5>
              <small class="text-secondary">Entrepreneur</small>
            </div>
          </div>

<div class="col-md-4">
            <div class="feedback-box">
              <p class="text-muted">
                "Great communication and modern UI design. Highly recommended."
              </p>

<h5 class="mt-3 mb-0">Michael Lee</h5>
              <small class="text-secondary">Startup Founder</small>
            </div>
          </div>
        </div>
      </div>
    </section>

More Examples

portfolio

Author:
Ad Apon7

4 months ago

882

v.5.3
Personal Portfolio About Section

Author:
Creative Araf

2 months ago

316

v.5.3
mision and vission

Author:
Ad Apon7

4 months ago

676

v.5.3
Existing Client Section

Author:
istiakahmedchowdhury10

1 month ago

92

v.4.6
Personal Portfolio Service Section

Author:
Creative Araf

2 months ago

275

v.5.3
Personal Biography section
destra immagine e sinistra testo

Author:
Anonymous

3 months ago

453

v.5.3
Gradient Hero Section
A visually stunning hero section with a gradient background and a call-to-action button.

Author:
Prajwal Hallale

2 years ago

5.9k

v.5.3
About Section

Author:
istiakahmedchowdhury10

1 month ago

74

v.4.6
Gradient Hero Section with Pulsing Button

Author:
Ranadhir Debnath

11 months ago

1.7k

v.5.3
Simple hero
Hero section with a linear gradient

Author:
Moana silva

2 years ago

3.6k

v.4.6
slider

Author:
Ad Apon7

4 months ago

917

v.5.3
Clean hero section with image

Author:
Prajwal Hallale

2 years ago

4k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent