→ 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

842

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,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAJQAqQMBIgACEQEDEQH/xAAbAAABBQEBAAAAAAAAAAAAAAAAAQMEBQYCB//EAD4QAAEDAgQEBAQEAwUJAAAAAAEAAgMEEQUSITEGE0FRImFxgRQykbEjQqHRweHwBxUkUmIWQ1NygpOiwvH/xAAaAQACAwEBAAAAAAAAAAAAAAAABAIDBQEG/8QAJhEAAgICAgEEAgMBAAAAAAAAAAECAwQRITESBRMyQSJxFSMzYf/aAAwDAQACEQMRAD8A06EITx50EIQgAQhCABCEqAKbH8Q+Fgla2TI5oDiQLm2u3n/Wy85bgvEONVxlpqHlsJveZ9iPU7r0GngbiGJxySPzxCoILT0t/X6rSQMj+OkawNADvypG21rk9Hh48VFIwdJ/Z9j1RHaQ0jQdiH/iRnycN/dWeHf2eYhG4Nr6ljgw5o5B8zT2t6L0yijGVPTRXGhVHnJrY34QT0eSS0OJcK4sYGVUk9DOC+HmC+o+Zp+/RaPDq6GvpxLDuNHNO7SrriegFVhbnBodLFd8d+9tlhOFHPZi1REGlrDFmcD0dm/mmaLJN6ZmZ+NX4ucTVoQhOGIhEJUiAESLpIUAcoSpEAdIQhAAhCEACEIQAqUC+ndIEo01QdXZm8Ec5uIuoo7l0ctg46aXJJUqn4xwCjrniepcGiQt5mTTey44escdrTK9xq23zuc217tO3peyZPA8lTIznVEvw/RsRFiOoIOt/NIWeLfJ6jHjOKPR8JxChxCjZUUM7JonDRzDum8S4hwjD5Y4K2uiilk+VhOpWX4LwkYFis9NDJIaWQEtjkdfIb6C6lVvCz5cV+OinmjkJ1cAHC1vlsdvVUrW9IvcWuWWGMYpTSYNUzU8mfltBOixPCUwqq/EZwDYZGh3rclbjEKLk4HVNmdzXmI3f5KiwjB/7ooWNOUun/FcWi24Cvx9eRn+oJ+y2iUhKUJ48+IkXSRACJClQgDlIlQgAQhCABCEIAEIQgBRslCRFwEAVDg/D8afU8vLBJETLJ0Lri1+x6eiu6HGmfBBzBdxBtmNh5qrx5rpsKnbHq8NzADrboq3D4zjvChFBV8isgecsgaHdb2I7WWfkQ8Wek9OyPchz2WHDXE8T8bkp66mnikIOV51a519h2W3ZXOdAZ3QPaL6sdbMB3AG6zPDNLG5gMlY8ztyhwnp2E3tra1lcVFNXSztdDWiKmYCZAYQHSHpY30HdVOOlwaEtN8k+qnimp2jwuY+2+xBIVTicrJKi0RuxgsD37rmpmbfkRbN/KNgBYn9dFGKZxY7/JmH6pdr+pfs5KEtkWThjCIS2SIOiJClQgDlFkqEAcoQhAAhCEACEJCUAI51kxJLZEz7KFLLquNk0h582iwuH45/s7j89wPhHTHmx2+y1rnkAk9BdYTiHDH1FbJPCScxzC3Yqm1J68ujU9PUl5NHsWBVGH4hAyemlEkLtQA69vIp3HMepKCHlMlbzD8rQb2HdeK8P4Bik5cKeeeBpPiMbrXXonD/AAOKWRlRVzyTy9XSG5SklGP2a/lOX0XmFxvOHTVU4s+ZwyDs3+rlKrOpY2KlLBYAAAfVVhsCmsXmDMT1StqxMEiUpEwZYIQhACJF0dkiAESJUIOnCEIQAIQhdAE28pz127pjOJQeW7Ua2O6EtlkK5SI0weehA7nQfVV9WJGN/DsSdAbbKwfKeWJGXJaw3afzEFMzuZJRmaM+BwzC3Yq2NaT5GVXGJRSVEjBGBctubknf+WyTCoHGtkhmYSwO8BI3aRcfTb2UiopojSxu28A2Wi4XpIqttLHVRsLcnhDiQ4EaaHdV5lXnVwNYdvt2c9HOGUzsPnyiO8TjfQbLSQzP0voOysJMDFv8PLa35ZBf9VyMImvaSRgH+gE/ssdwns2FbDXZQ4lVmSRkLD2c4fYfdQZ3kBgb8zX3ve1tF1XxtjxCsERMgjeGklwve21hsomd77E3FyNPf+S2Mavwr0ZOTYrLP+E3mujdZ5P/ACuOtu9+q7jnY82FwfNVtTUc+vmgd+VrXEjXQ9LKTUvaJad7Q0+PfysrnWhKVUWTUJqN348pYPCbWaToD1T126Zb+YcDp+6pcdFE6XFbERZCFEpEKEHdCAG0IQg6CEI06mwQBX4hNaV7Wkgxtvp1VRW176aJlVFqYZAX3O7HaH6brnFqgSStlieGuEha1xOgkvo0+R2TU/LfTPdyw2BwLZYnDVtvmb9L/RNxhpDsXxot45mykOjbYBzmuHY9f4KoqqqSkwadrI3yuZJLGGt3Ivf7FdYK51PPWUkpLnlrJQ++51YT75AfddObK+mrzC5weyZ72kdwAbforEkDIT8Rnqqds9Bhc4fq0CocGtb3uBqVR4biOO4Di0eJl3xTJ3hs7HEDKWmwA/y2vp7ra0JbUYfHMBpIzPb1tdVz6OSWtfRwlodUkPjzGwDtRe/TXKoyhFrTJRscXtHtGF1rMQw2mrIgQyaMPAO4v3TONVraPD55HvDBkOpNrFQuECY8FFO/LnppXxODTcDW/wBiFmeN3HEsRbA516alc3wE6OeQbk9NAs2FflPQ7Oeo7PNZosXo8brMawhwdnDHzU7/AJZmnoR30Ou61WH1763xS4bV0pc25zlrmhw6XBv+i4jiLafEZTpd5b7AAW/VTKYWgnY0+No0v6FaPhFPaE/cbWmGGyslqZ5XOF5XHID1a3TT3+6OaXyAX0F2j1KqZJnU2E4fVx3DqctLgex8Lr/dT4XANe8kAZrj3U3EgmWdM92Uste+noOxViwfhgOOYjqqinnAIubA+dxdWET9OrXdL7lVSiS7jofSFF/dBS3TEGtPQiEIXDg2hCEHQUfEHujoZnsaXFrb5R1UhV2OVJhonMjc0SvHhubA21KlFbZKK2zKF7GukqCefhlSLTC3iiP+Y+h3UmMTQVJpagiYPFhL/wAVtrB3rbQ9xruFX0kc1R8RVYa5kdT8tZSS6slHe3T1UqhzSRGDkymCI2MJN5aY92u/M3X1Tw0hMKqc1eyIuvMyB0bj3yuAF/YhW+F2MNQXOtnnfc+hssnRzvh4vc2+Z5iuco0ee/vlH0Wqr2w076b4GoL2PiL5YwzKGPJ/+qPklwTa+x3hxzXYZG0DwtL2C3YOKStivVUz+uV7Ljppcfq1NwVD4KUkRtawNzXAt1JUid+aemeDoHnbza5H2c+tGs/s7kcaHFI3uvkqb6+bGlVFbefEppBc3cVZ8CuHw2NuadOa0j/thUTyHVjifPdKwX9khiT/AARDjOegqu7nSO/8j+yckeYqwBx8EzMunfomIXOZRwEW8QcD56ndcVFbCMQ5UkL8hyZAGusPdNbF9cDGJgGgqYemXl+6jCstHQwZ7SPYSS7ysPuf0UvF2NlweaQVDGTMlGWlI8Thve/1+hVLOyGTFIQY8xjisA46Ek63+mylGSl0QlHXZoqOUu1h/EI/3lvCfTv/AFqrGmbOGufLIGAn8upd5XO3soVHd2gDBfYhTWQ5n3aM7m/nkvZq4yS64LOHSMaWulKbp5A8vjz53sPit5p5Jz+TE5/JnKEpCSygRG0IQTZB05cbKkxx8RYBM1hYN3ObfLfS6tp32G6qKqSjzWrpDlkdkbExuZ79NV1TUXtl9FUrJ+MTOz4fNFNzoTJDUQ6tmju5pb5jcgj1VhTTtrXiSzIq1mrshuyVoOpB/huFdYVV4C97aQGWnfHdjG1Bc15b/wBQ1Ttfw5+L8Vhbmvmb4suwkHbtfsf4Kcc6mT10aLwLoret/o86xuX4HixktiA+A2LSL77q/gldUU4m5pLXNBBVdxxTZauincMrxnjLSLEXFwjh2fn4NEwkXY7L8yaTT6FpJotuY8xujc8kcm13FT6JwmbTOeR8gue2m6qaxwihqCfmazKLd7aKfSAspmC4tywNr29fqpPogmbjhWGOnocaEMzZmc/SRmx/DCzhdEX3BBlLzp2Fhb9brR8FMvwvVStF+dLK4C29vD/6rIvf/iPkOo08Om6Ur+chqfxRzAc+GQjS4uNuxK6qJHPOdklnEbaDSyjxSGNoYLjU6JmaQWYXNdm0FxoQmWuRdPSIOPtqn08s8Dzz4hnAsLG24TvDeH1OP1Bq6Vr3RjKA8jK3a+/lfoExNFPiTm0VLcySus4gasb1JW+wCFmGUcVHRkilhswtJ3PqlcrL9jiPY1iYnvrcukdU3Dw5TviK13NaLNETOvZMHD6qhZEZS+Nz9g9+Zrj2v0Wqc53JsRk/0M1JVLWVkdY5jW05EcZIJedXe3RK4+RbOWnyhrIx6oQ2uGRYg7QuJ8wdweydKC1oAshNWdmFetTEQhCrKRpcuOi6Tchs1BIhVUlgqqGpr2ytkpnUUDDJbPM7xv8AYC9vcKXXSWuspidThlLWF9dTy1L3NPg5xDR52Fv1VVkZSWkaXp8ows3I9Kp5auSACWSCaPZzhcW9AVOoSS1ueVmY7DuPRed4RxVw47l08tN8I7QMcWuyg+tyF6DRTwVFJG3MxzDsR1WbKEov8lo9FGcZR/FlbxfwpTcR0rcxdFVxHNFI3a/YjqFgcK4fxTBXTQ4hTgRl4LZIzmbe/wBR7heuxy6BrrEdCiRkcty9rcu1+qvqyZ1dcoVtxoW98M8mxzWEQs0MrxbN6Kyopmvog9pANrWJ67d1vJ8EoZwXPpInHcGyZbgdBFG+KOlaGPaWuHSxTv8AJQa04iP8bNPaki44ThMHDuHRuAzPiD3DzdqfuvPK48rEJYwNGvc0adjovQYaypgjZE0RvawBrQRbT2WdrsJmqJJnDKObJmtfQb/uq6cutSbk+ydmJY0tGVdzXSWymwO6ra4HKXAuEjXEAD9lsJsFqHDIJGhvUi9yuI+E6OSxnZmJ303TEs+hdPZSsC59rRRcAxSsldUVAs2peWg72Y3r7m620xjhq4o5XiOF5y7beZVUyghw6WSnjbZkZs0eR1/j91xUsgnhMMsfMbtd2twqHiu+Xub7GFlqiPtqPRaz8SUsM7aWhcM50M8p09r7/ZQonsglfzMwLjrdp18z7qmEjHVctK2Xcc2Fx3B2Nx1BO/8ANTMMfaLlxOGRzbthdc8u27Wn/L2T1dMa1qIlbfK1/kWplDnsa0904otM38QbHK3p3UpV2Lkzr3uYIQkuoFQ2mJ/lKELhIo8QJ1VBPGx87szQbW6eaEK3H+ZeuhMQoKQ4c5z6aJ5/1N/ZRfj6zhyejiw6plMFRbNFK7M1vp1H1QhTyknDkbw5SUuGemYNiU9TQB8gZmsTcBJ/eNQ+mzEtHitYDRCFgs34k2kxGofEMxG/ZT3vdclCFV9lgyJnh1hb6KQDdl+yEKIHTGtcw3AuOqHNa03aB9EiEESgx91sQpXBrbyMc12m4BFvuVSVMr2EkH5RolQvQYP+CMPN/wBWQKj8OupXs0cJgPZw1ClQeGwaTpIRe+troQnRJF9RAcskC1ypCEJOz5MVs+bEO6EIUCJ//9k="
                />
              </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 Service Section

Author:
Creative Araf

1 week ago

72

v.5.3
Hero slider

Author:
Juan Antonio González Hernández

3 months ago

1.7k

v.5.3
Clean hero section with image

Author:
Prajwal Hallale

2 years ago

3.7k

v.5.3
Clean hero section with image
tugas

Author:
Anonymous

11 months ago

1.4k

v.5.3
Hero Parallaxx

Author:
java stories story

9 months ago

2.8k

v.5.3
Animated hero section

Author:
Anonymous

2 years ago

7.6k

v.5.3
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

1 year ago

3.6k

v.4.6
marquee track

Author:
Juan Antonio González Hernández

3 months ago

726

v.4.6
Gradient Hero Section with Pulsing Button

Author:
Ranadhir Debnath

9 months ago

1.5k

v.5.3
portfolio

Author:
Ad Apon7

2 months ago

269

v.4.6
Personal Biography section
destra immagine e sinistra testo

Author:
Anonymous

1 month ago

194

v.5.3
aboutContwnt

Author:
Sahin Miah

1 month ago

740

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent