→ 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

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 Biography section
destra immagine e sinistra testo

Author:
Anonymous

1 week ago

49

v.5.3
Personal Biography section

Author:
Ad Apon7

3 weeks ago

145

v.5.3
Simple hero section

Author:
Mateo Rojas

1 year ago

7.2k

v.5.3
mision and vission

Author:
Ad Apon7

1 month ago

139

v.5.3
Animated hero section

Author:
Anonymous

2 years ago

7.4k

v.5.3
portfoilo page

Author:
Ad Apon7

1 month ago

76

v.5.3
Hero slider

Author:
Juan Antonio González Hernández

2 months ago

1.1k

v.5.3
marquee track

Author:
Juan Antonio González Hernández

2 months ago

472

v.4.6
Basic hero
Hero section with background image

Author:
Prajwal Hallale

2 years ago

4.6k

v.4.6
Hero Parallaxx

Author:
java stories story

8 months ago

2.5k

v.5.3
Gradient Hero Section with Pulsing Button

Author:
Ranadhir Debnath

8 months ago

1.4k

v.5.3
aboutContwnt

Author:
Sahin Miah

3 weeks ago

71

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent