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

501

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