→ 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

981

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

portfoilo page

Author:
Ad Apon7

3 months ago

819

v.5.3
Simple hero section

Author:
Mateo Rojas

1 year ago

7.6k

v.5.3
Personal Biography section
destra immagine e sinistra testo

Author:
Anonymous

2 months ago

405

v.5.3
Gradient Hero Section with Pulsing Button

Author:
Ranadhir Debnath

11 months ago

1.6k

v.5.3
E-Commerce Full

Author:
Zahid Hasan Riyad

3 weeks ago

224

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.6k

v.5.3
portfolio page

Author:
Md. Hasibur Rahman

1 month ago

137

v.4.6
Hero section with an image

Author:
Ankit khedkar

1 year ago

15k

v.5.3
Skills Information section

Author:
Ad Apon7

3 months ago

710

v.5.3
Existing Client Section

Author:
istiakahmedchowdhury10

4 weeks ago

78

v.4.6
Personal Biography section

Author:
Ad Apon7

3 months ago

600

v.5.3
Personal Portfolio Service Section

Author:
Creative Araf

1 month ago

236

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent