→ Sahin Miah
→ home_all_contant

home_all_contant

This bootstrap css example is contributed by Sahin Miah, on 15-May-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Hero

Author Sahin Miah

998

v.4.6

Fork Fullscreen

<div
      id="carouselExampleInterval"
      class="carousel slide"
      data-bs-ride="carousel"
    >
      <div class="carousel-inner">
        <div class="carousel-item active" data-bs-interval="3000">
          <img
            class="cpic"
            src="https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGVkdWNhdGlvbnxlbnwwfHwwfHx8MA%3D%3D"
            alt="..."
          />
        </div>
        <div class="carousel-item" data-bs-interval="3000">
          <img
            class="cpic"
            src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGVkdWNhdGlvbnxlbnwwfHwwfHx8MA%3D%3D"
            alt="..."
          />
        </div>
        <div class="carousel-item" data-bs-interval="3000">
          <img
            class="cpic"
            src="https://images.unsplash.com/photo-1462536943532-57a629f6cc60?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fGVkdWNhdGlvbnxlbnwwfHwwfHx8MA%3D%3D"
            alt="..."
          />
        </div>
      </div>
      <button
        class="carousel-control-prev"
        type="button"
        data-bs-target="#carouselExampleInterval"
        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="#carouselExampleInterval"
        data-bs-slide="next"
      >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>

<section class="py-5">
      <div class="container">
        <div class="row align-items-center gx-4">
          <div class="col-md-5">
            <div class="ms-md-2 ms-lg-5">
              <img
                class="img-fluid rounded-3"
                src="https://plus.unsplash.com/premium_photo-1664304491249-81113667177e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fGhpZ2hlciUyMGVkdWNhdGlvbnxlbnwwfHwwfHx8MA%3D%3D"
              />
            </div>
          </div>
          <div class="col-md-6 offset-md-1">
            <div class="ms-md-2 ms-lg-5">
              <span class="text-muted">Our Story</span>
              <h2 class="display-5 fw-bold">About Us</h2>
              <h3>Sumaiya Jahan</h3>
              <p class="lead">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud.
              </p>
              <p class="lead mb-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

<section class="py-5">
    <div class="container">
 
      
      <div class="text-center mb-5">
        <h2 class="fw-bold">Our Mission & Vision</h2>
        <p class="text-muted">What drives us and where we are headed</p>
        <hr class="w-25 mx-auto border-primary border-2 opacity-75">
      </div>
 
      
      <div class="row g-4 justify-content-center">
 
        
        <div class="col-md-5">
          <div class="card h-100 shadow-sm border-0">
            <div class="card-body text-center p-4">
              <i class="bi bi-bullseye text-primary fs-1 mb-3 d-block"></i>
              <h4 class="card-title fw-bold">Our Mission</h4>
              <p class="card-text text-muted">
                To empower communities by delivering innovative, accessible, and sustainable
                solutions that create real and lasting impact in people's lives every day.
              </p>
            </div>
          </div>
        </div>
 
        
        <div class="col-md-5">
          <div class="card h-100 shadow-sm border-0">
            <div class="card-body text-center p-4">
              <i class="bi bi-eye text-success fs-1 mb-3 d-block"></i>
              <h4 class="card-title fw-bold">Our Vision</h4>
              <p class="card-text text-muted">
                A world where every individual, regardless of background or location,
                has equal access to opportunity, growth, and a better quality of life.
              </p>
            </div>
          </div>
        </div>
 
      </div>
    </div>
  </section>
  
    <section class="py-5">
      <div class="container">
        
        <div class="row text-center mb-4">
          <div class="col-12 col-lg-10 col-xl-8 mx-auto text-center">
            <p class="text-muted mb-0 fw-light">Steps</p>
            <h2>Service List</h2>
            <p class="lead mb-0">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
              tristique nec sapien vel bibendum. Phasellus sagittis nisl vitae
              auctor sodales.
            </p>
          </div>
        </div>
        
        <div class="row justify-content-center pt-5">
          <div class="col-lg-9">
            <div class="row">
              <div class="col-lg-4">
                <div
                  class="card rounded-0 text-center p-3 bg-light px-5 mb-5 mb-lg-0"
                >
                  <div
                    class="d-flex rounded-circle mx-auto align-items-center justify-content-center text-white fs-3 fw-bold bg-primary border border-white border-4"
                    style="width: 4rem; height: 4rem; margin-top: -3.5rem"
                  >
                    1
                  </div>
                  <h5 class="mt-3 mb-4">Web Development</h5>
                  <p class="text-muted">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
                    Lorem ipsum dolor.
                  </p>
                </div>
              </div>
              <div class="col-lg-4">
                <div
                  class="card rounded-0 text-center p-3 bg-light px-5 mb-5 mb-lg-0"
                >
                  <div
                    class="d-flex rounded-circle mx-auto align-items-center justify-content-center text-white fs-3 fw-bold bg-primary border border-white border-4"
                    style="width: 4rem; height: 4rem; margin-top: -3.5rem"
                  >
                    2
                  </div>
                  <h5 class="mt-3 mb-4">Graphic Designer</h5>
                  <p class="text-muted">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
                    Lorem ipsum dolor.
                  </p>
                </div>
              </div>
              <div class="col-lg-4">
                <div
                  class="card rounded-0 text-center p-3 bg-light px-5 mb-5 mb-lg-0"
                >
                  <div
                    class="d-flex rounded-circle mx-auto align-items-center justify-content-center text-white fs-3 fw-bold bg-primary border border-white border-4"
                    style="width: 4rem; height: 4rem; margin-top: -3.5rem"
                  >
                    3
                  </div>
                  <h5 class="mt-3 mb-4">Excel Expert</h5>
                  <p class="text-muted">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
                    Lorem ipsum dolor.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

<section class="py-5">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-10">
            <div class="row align-items-center">
              <div class="clintdivhome col-md-4 mb-4 mb-md-0 order-md-2 cdiv">
                <img
                  alt=""
                  class="clintpic"
                  src="data:image/jpeg;base64,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"
                />
              </div>
              <div class="col-md-8 ps-md-5">
                <div class="text-primary mb-4">
                  <svg
                    class="bi bi-quote"
                    fill="currentColor"
                    height="48"
                    viewbox="0 0 16 16"
                    width="48"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M12 12a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1h-1.388c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 9 7.558V11a1 1 0 0 0 1 1h2Zm-6 0a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1H4.612c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 3 7.558V11a1 1 0 0 0 1 1h2Z"
                    ></path>
                  </svg>
                </div>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Sapiente accusantium nulla, sequi cupiditate exercitationem
                  sit incidunt rerum explicabo. Soluta beatae esse
                  praesentiumexercitationem vero harum pariatur adipisci qui
                  veritatis est! sequi cupiditate exercitationem sit incidunt
                  rerum explicabo.
                </p>
                <h5 class="fw-bold">John Doe</h5>
                <div class="text-muted">Graphic Designer</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

More Examples

Personal Portfolio About Section

Author:
Creative Araf

2 months ago

311

v.5.3
Simple hero section

Author:
Mateo Rojas

1 year ago

7.7k

v.5.3
Elon Musk 2
hero to last home

Author:
RAHAT RAHMAN OFICIAL

3 months ago

523

v.4.6
Hero Parallaxx

Author:
java stories story

11 months ago

2.9k

v.5.3
Cart Hero Pro

Author:
Juan Antonio González Hernández

5 months ago

976

v.5.3
portfoilo page

Author:
Ad Apon7

3 months ago

363

v.5.3
Simple hero
Hero section with a linear gradient

Author:
Moana silva

2 years ago

3.5k

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

5.9k

v.5.3
Existing Client Section

Author:
istiakahmedchowdhury10

1 month ago

88

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

3.9k

v.4.6
portfolio

Author:
Ad Apon7

4 months ago

868

v.5.3
portfolio

Author:
Ad Apon7

4 months ago

346

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent