→ 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

1.1k

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

Clean hero section with image
tugas

Author:
Anonymous

1 year ago

1.7k

v.5.3
Existing Client Section

Author:
istiakahmedchowdhury10

2 months ago

126

v.4.6
Home Page

Author:
Md. Hasibur Rahman

3 months ago

257

v.4.6
Basic hero
Hero section with background image

Author:
Prajwal Hallale

2 years ago

5.3k

v.4.6
aboutContwnt

Author:
Sahin Miah

5 months ago

845

v.4.6
client feedback

Author:
Huryra

2 months ago

171

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
Hero Parallaxx

Author:
java stories story

1 year ago

3.1k

v.5.3
Personal Biography section
idem

Author:
Anonymous

4 months ago

542

v.5.3
Personal Portfolio About Section

Author:
Creative Araf

3 months ago

456

v.5.3
Hero Section with Animations
Interactive hero section with animated elements, key statistics, and modern styling

Author:
Isaac Winslow

1 year ago

7.9k

v.5.3
About Section

Author:
istiakahmedchowdhury10

2 months ago

127

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent