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

619

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 page

Author:
Md. Hasibur Rahman

3 months ago

234

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

Author:
Prajwal Hallale

2 years ago

6k

v.5.3
Basic hero
Hero section with background image

Author:
Prajwal Hallale

2 years ago

5.3k

v.4.6
home_all_contant

Author:
Sahin Miah

5 months ago

1.1k

v.4.6
Animated hero section

Author:
Anonymous

2 years ago

8.3k

v.5.3
Gradient Hero Section with Pulsing Button

Author:
Ranadhir Debnath

1 year ago

1.8k

v.5.3
Cart Hero Pro

Author:
Juan Antonio González Hernández

7 months ago

1.1k

v.5.3
Existing Client Section

Author:
istiakahmedchowdhury10

3 months ago

133

v.4.6
HTML and CSS for Hero Section
Explanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image

Author:
zobaidul kaziex

2 years ago

4.1k

v.4.6
Simple hero
Hero section with a linear gradient

Author:
Moana silva

2 years ago

3.8k

v.4.6
Clean hero section with image
tugas

Author:
Anonymous

1 year ago

1.7k

v.5.3
Hero section with an image

Author:
Ankit khedkar

2 years ago

15.8k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent