Bootstrap 5 Components

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Bootstrap Component #621

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light">
  <div class="container">
    <div class="mw-lg mw-lg-6xl mx-auto">
      <div class="row">
        <div class="col-12 col-lg-5 col-xl-6 mb-12 mb-lg-0">
          <div class="mw-sm">
            <h3 class="font-heading mb-4">Contact us</h3>
            <p class="text-light-dark mb-0">Submit your info and we’ll get back to you as soon as possible.</p>
            <div class="my-10">
              <svg width="49" height="3" viewBox="0 0 49 3" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="1" width="12" height="1" rx="0.5" fill="#FFC96D"></rect><circle cx="17.5" cy="1.5" r="1.5" fill="#FFA632"></circle><circle cx="24.5" cy="1.5" r="1.5" fill="#FFA632"></circle><circle cx="31.5" cy="1.5" r="1.5" fill="#FFA632"></circle><rect x="37" y="1" width="12" height="1" rx="0.5" fill="#FFC96D"></rect></svg>
            </div>
            <div class="mb-10">
              <div class="d-flex mb-4 align-items-center">
                <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="36" height="36" rx="10" fill="#FF7100"></rect>
                  <path d="M26.3333 25.7083H9.66666C9.32499 25.7083 9.04166 25.9916 9.04166 26.3333C9.04166 26.675 9.32499 26.9583 9.66666 26.9583H26.3333C26.675 26.9583 26.9583 26.675 26.9583 26.3333C26.9583 25.9916 26.675 25.7083 26.3333 25.7083Z" fill="white"></path>
                  <path d="M22.1667 9.66669H13.8333C11.3333 9.66669 10.5 11.1584 10.5 13V26.3334H25.5V13C25.5 11.1584 24.6667 9.66669 22.1667 9.66669ZM16.3333 22.375H13.8333C13.4917 22.375 13.2083 22.0917 13.2083 21.75C13.2083 21.4084 13.4917 21.125 13.8333 21.125H16.3333C16.675 21.125 16.9583 21.4084 16.9583 21.75C16.9583 22.0917 16.675 22.375 16.3333 22.375ZM16.3333 18.625H13.8333C13.4917 18.625 13.2083 18.3417 13.2083 18C13.2083 17.6584 13.4917 17.375 13.8333 17.375H16.3333C16.675 17.375 16.9583 17.6584 16.9583 18C16.9583 18.3417 16.675 18.625 16.3333 18.625ZM16.3333 14.875H13.8333C13.4917 14.875 13.2083 14.5917 13.2083 14.25C13.2083 13.9084 13.4917 13.625 13.8333 13.625H16.3333C16.675 13.625 16.9583 13.9084 16.9583 14.25C16.9583 14.5917 16.675 14.875 16.3333 14.875ZM22.1667 22.375H19.6667C19.325 22.375 19.0417 22.0917 19.0417 21.75C19.0417 21.4084 19.325 21.125 19.6667 21.125H22.1667C22.5083 21.125 22.7917 21.4084 22.7917 21.75C22.7917 22.0917 22.5083 22.375 22.1667 22.375ZM22.1667 18.625H19.6667C19.325 18.625 19.0417 18.3417 19.0417 18C19.0417 17.6584 19.325 17.375 19.6667 17.375H22.1667C22.5083 17.375 22.7917 17.6584 22.7917 18C22.7917 18.3417 22.5083 18.625 22.1667 18.625ZM22.1667 14.875H19.6667C19.325 14.875 19.0417 14.5917 19.0417 14.25C19.0417 13.9084 19.325 13.625 19.6667 13.625H22.1667C22.5083 13.625 22.7917 13.9084 22.7917 14.25C22.7917 14.5917 22.5083 14.875 22.1667 14.875Z" fill="white"></path>
                </svg>
                <span class="ms-3 display-5 fw-bold">Company HQ</span>
              </div>
              <span class="d-block text-light-dark">4140 Parker Rd. Allentown,</span>
              <span class="text-light-dark">New Mexico 31134</span>
            </div>
            <div class="position-relative mw-xs p-8 bg-white border border-light rounded-3">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #622

Bootstrap

Solstice

<section class="position-relative py-12 py-md-20 bg-primary-light overflow-hidden">
  <div class="container">
    <div class="row">
      <div class="col-6 col-lg-3 order-last order-lg-0">
        <div class="mb-6 rounded-3 bg-info-light bg-opacity-25" style="height: 340px;"></div>
        <div class="rounded-3" style="height: 340px; background: linear-gradient(180deg, rgba(255, 234, 194, 0.00) 0%, #FFEAC2 100%);"></div>
      </div>
      <div class="col-lg-6">
        <div class="mw-xl pb-20 pb-lg-0 pt-lg-24 mx-auto text-center">
          <h1 class="font-heading d-none d-lg-inline-block text-primary" style="font-size: 192px;">404</h1>
          <h1 class="font-heading d-inline-block d-lg-none text-primary mb-6" style="font-size: 72px;">404</h1>
          <p class="fs-5 text-light-dark mb-10">The page you are looking for was moved, removed, renamed or might have never existed!</p>
          <a class="btn btn-primary border-primary-dark" href="#">Back to Home</a>
        </div>
      </div>
      <div class="col-6 col-lg-3">
        <div class="mb-6 rounded-3 bg-info-light bg-opacity-25" style="height: 340px;"></div>
        <div class="rounded-3" style="height: 340px; background: linear-gradient(180deg, rgba(255, 234, 194, 0.00) 0%, #FFEAC2 100%);"></div>
      </div>
    </div>
  </div>
  <div class="position-absolute bottom-0 start-0 w-100 py-32" style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF2D6 100%);"></div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #623

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light">
  <div class="container">
    <div class="mw-md mw-md-none mx-auto">
      <div class="row">
        <div class="col-12 col-md-4 mb-6 mb-md-0">
          <div class="py-6 px-6 px-lg-10 h-100 text-center bg-white rounded-3">
            <h4 class="mb-1 h2 text-primary">101K+</h4>
            <p class="text-dark mb-0">Users studying around the globe</p>
          </div>
        </div>
        <div class="col-12 col-md-4 mb-6 mb-md-0">
          <div class="py-6 px-6 px-lg-10 h-100 text-center bg-white rounded-3">
            <h4 class="mb-1 h2 text-primary">352K+</h4>
            <p class="text-dark mb-0">Registered Users</p>
          </div>
        </div>
        <div class="col-12 col-md-4 mb-6 mb-md-0">
          <div class="py-6 px-6 px-lg-10 h-100 text-center bg-white rounded-3">
            <h4 class="mb-1 h2 text-primary">94K+</h4>
            <p class="text-dark mb-0">Registered Users</p>
          </div>
        </div>
      </div>
    </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #624

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 position-relative bg-primary-light">
  <div class="container">
    <div class="mw-xs mw-md-5xl mx-auto">
      <div class="row">
        <div class="col-12 col-md-6">
          <div class="py-12">
            <div class="d-flex mb-6 align-items-center">
              <svg width="52" height="26" viewBox="0 0 52 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2 26C1.99983 22.8482 2.62048 19.7273 3.8265 16.8154C5.03252 13.9035 6.80029 11.2577 9.02887 9.02906C11.2575 6.80042 13.9032 5.0326 16.815 3.82654C19.7268 2.62049 22.8477 1.99983 25.9994 2C39.2544 2 50 12.7446 50 26" stroke="#530031" stroke-width="3" stroke-miterlimit="10"></path>
                <path d="M7.41928 26C7.41928 21.0563 9.37688 16.3151 12.8614 12.8194C16.346 9.32367 21.072 7.3598 25.9999 7.3598C30.9278 7.3598 35.6539 9.32367 39.1384 12.8194C42.623 16.3151 44.5806 21.0563 44.5806 26" stroke="#FF7100" stroke-width="3" stroke-miterlimit="10"></path>
                <path d="M12.6004 26C12.6004 22.4463 14.0122 19.038 16.5251 16.5251C19.038 14.0123 22.4462 12.6005 25.9999 12.6005C29.5537 12.6005 32.9619 14.0123 35.4748 16.5251C37.9877 19.038 39.3994 22.4463 39.3994 26" stroke="#FFC96D" stroke-width="3" stroke-miterlimit="10"></path>
              </svg>
              <span class="d-inline-block ms-4 fs-5 fw-medium">What are you waiting for?</span>
            </div>
            <h3 class="font-heading mb-10">Join now and learn together!</h3>
            <a class="btn btn-primary border-primary-dark" href="#">Sign Up Now</a>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="d-flex flex-column h-100 align-items-end justify-content-between">
            <div class="position-relative d-inline-block mb-10 mb-md-0 px-5 pt-2 bg-secondary rounded-2">
              <span class="position-absolute bottom-0 start-0 m-3 badge lh-base bg-white fw-semibold">Sophie</span>
              <img class="img-fluid" src="solstice-assets/images/cta/woman-picture1.png" alt="">
            </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #625

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="text-center mb-24">
        <span class="badge mb-6 text-primary text-uppercase">Features</span>
        <h3 class="font-heading text-center mb-0">Discover our features</h3>
      </div>
      <div class="row align-items-center">
        <div class="col-lg-6 mb-12 mb-lg-0">
          <img class="img-fluid w-100" src="solstice-assets/images/features/events-half-primary.png" alt="">
        </div>
        <div class="col-lg-6">
          <div class="mw-md ms-lg-auto">
            <h4 class="font-heading mb-6">Events and discussion</h4>
            <p class="text-light-dark mb-10">Elevate your learning with thought-provoking events and vibrant discussions that foster growth and collaboration.</p>
            <div class="d-inline-block bg-white rounded-pill"><a class="btn btn-outline-light text-dark" href="#">See upcoming events</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #626

Bootstrap

Solstice

<section class="overflow-hidden">
  <div class="row align-items-center">
    <div class="col-lg-6">
      <div class="mw-md py-12 py-md-24 py-lg-40 px-5 mx-auto">
        <h4 class="font-heading mb-4">Login</h4>
        <p class="mb-8">
          <span class="text-light-dark">New to Solstice?</span>
          <a class="d-inline-block text-dark border-0 fw-bold" href="#">Create new account</a>
        </p>
        <form action="">
          <label class="form-label" for="">Email</label>
          <input class="form-control mb-4" type="email" placeholder="john@email.com">
          <label class="form-label" for="">Password</label>
          <div class="position-relative">
            <input class="form-control" type="email" placeholder="Enter password">
            <button class="btn p-0 border-0 position-absolute top-50 end-0 me-4 translate-middle-y">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21.25 9.15C18.94 5.52 15.56 3.43 12 3.43C10.22 3.43 8.49 3.95 6.91 4.92C5.33 5.9 3.91 7.33 2.75 9.15C1.75 10.72 1.75 13.27 2.75 14.84C5.06 18.48 8.44 20.56 12 20.56C13.78 20.56 15.51 20.04 17.09 19.07C18.67 18.09 20.09 16.66 21.25 14.84C22.25 13.28 22.25 10.72 21.25 9.15ZM12 16.04C9.76 16.04 7.96 14.23 7.96 12C7.96 9.77 9.76 7.96 12 7.96C14.24 7.96 16.04 9.77 16.04 12C16.04 14.23 14.24 16.04 12 16.04Z" fill="#A3A3A3"></path>
                <path d="M12.0004 9.14C10.4304 9.14 9.15039 10.42 9.15039 12C9.15039 13.57 10.4304 14.85 12.0004 14.85C13.5704 14.85 14.8604 13.57 14.8604 12C14.8604 10.43 13.5704 9.14 12.0004 9.14Z" fill="#A3A3A3"></path>
              </svg>
            </button>
          </div>
          <div class="mt-3 mb-8 text-end"><a class="d-inline-block small fw-semibold p-0" href="#">Forgot Password?</a></div>
          <button class="btn mb-4 py-3 lh-lg w-100 btn-primary border-primary-dark">Login</button>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #627

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light overflow-hidden">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-6">
        <p class="fs-6 fw-semibold text-secondary">Backed by leading education companies</p>
      </div>
      <div class="col-12 col-md-6">
        <div class="row">
          <div class="col-6 col-lg-3 mb-6 mb-sm-0">
            <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-secondary1.png" alt="">
          </div>
          <div class="col-6 col-lg-3 mb-6 mb-sm-0">
            <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-secondary2.png" alt="">
          </div>
          <div class="col-6 col-lg-3 mb-6 mb-lg-0">
            <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-secondary3.png" alt="">
          </div>
          <div class="col-6 col-lg-3">
            <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo-secondary4.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #628

Bootstrap

Solstice

<section class="overflow-hidden">
  <div class="row align-items-center">
    <div class="col-lg-6">
      <div class="mw-md py-12 py-md-24 py-lg-40 px-5 mx-auto">
        <h4 class="font-heading mb-4">Sign up</h4>
        <p class="mb-8">
          <span class="text-light-dark">Already have an account?</span>
          <a class="d-inline-block text-dark border-0 fw-bold" href="#">Login</a>
        </p>
        <form action="">
          <label class="form-label" for="">Email</label>
          <input class="form-control mb-4" type="email" placeholder="john@email.com">
          <label class="form-label" for="">Password</label>
          <div class="position-relative">
            <input class="form-control mb-8" type="email" placeholder="Enter password">
            <button class="btn p-0 border-0 position-absolute top-50 end-0 me-4 translate-middle-y">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21.25 9.15C18.94 5.52 15.56 3.43 12 3.43C10.22 3.43 8.49 3.95 6.91 4.92C5.33 5.9 3.91 7.33 2.75 9.15C1.75 10.72 1.75 13.27 2.75 14.84C5.06 18.48 8.44 20.56 12 20.56C13.78 20.56 15.51 20.04 17.09 19.07C18.67 18.09 20.09 16.66 21.25 14.84C22.25 13.28 22.25 10.72 21.25 9.15ZM12 16.04C9.76 16.04 7.96 14.23 7.96 12C7.96 9.77 9.76 7.96 12 7.96C14.24 7.96 16.04 9.77 16.04 12C16.04 14.23 14.24 16.04 12 16.04Z" fill="#A3A3A3"></path>
                <path d="M12.0004 9.14C10.4304 9.14 9.15039 10.42 9.15039 12C9.15039 13.57 10.4304 14.85 12.0004 14.85C13.5704 14.85 14.8604 13.57 14.8604 12C14.8604 10.43 13.5704 9.14 12.0004 9.14Z" fill="#A3A3A3"></path>
              </svg>
            </button>
          </div>
          <button class="btn mb-4 py-3 lh-lg w-100 btn-primary border-primary-dark">Sign Up</button>
          <a class="btn w-100 d-flex flex-wrap btn-outline-light text-dark" href="#">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #629

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light">
  <div class="container">
    <div class="mw-lg mw-lg-6xl mx-auto">
      <div class="row align-items-center">
        <div class="col-12 col-lg-6 mb-12 mb-lg-0">
          <div class="mw-sm mx-auto ms-lg-0">
            <span class="badge mb-4 d-inline-flex align-items-center bg-white text-primary border border-info">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.62293 3.37707C8.567 3.32115 8.50813 3.21714 8.50077 3.02581C8.62835 3.19081 8.77541 3.3237 8.91729 3.42581C8.95382 3.45211 8.99065 3.47685 9.02752 3.5H9.015C8.79742 3.5 8.68271 3.43685 8.62293 3.37707ZM10.485 3.5H10.469C10.508 3.47551 10.547 3.44928 10.5856 3.42134C10.7259 3.31979 10.8723 3.18774 10.9993 3.02426C10.9922 3.21658 10.9331 3.321 10.8771 3.37707C10.8173 3.43685 10.7026 3.5 10.485 3.5Z" fill="#FF7100" stroke="#FF7100"></path>
                <path d="M9.015 4.75C8.04 4.75 7.25 3.96 7.25 2.985V1.5C7.25 1.225 7.025 1 6.75 1H3.5C2.12 1 1 2.115 1 3.49V6.975C1 8.355 2.12 9.475 3.5 9.475H4.25C4.39 9.475 4.57 9.565 4.65 9.675L5.4 10.67C5.73 11.11 6.27 11.11 6.6 10.67L7.35 9.675C7.445 9.55 7.595 9.475 7.75 9.475H8.505C9.885 9.475 11 8.36 11 6.98V5.25C11 4.975 10.775 4.75 10.5 4.75H9.015ZM4 6C3.72 6 3.5 5.775 3.5 5.5C3.5 5.225 3.72 5 4 5C4.275 5 4.5 5.225 4.5 5.5C4.5 5.775 4.28 6 4 6ZM6 6C5.72 6 5.5 5.775 5.5 5.5C5.5 5.225 5.72 5 6 5C6.275 5 6.5 5.225 6.5 5.5C6.5 5.775 6.28 6 6 6Z" fill="#FF7100"></path>
              </svg>
              <span class="ms-1">Newsletter</span>
            </span>
            <h3 class="font-heading mb-6">Subscribe</h3>
            <p class="text-light-dark mb-10">Fuel your curiosity by joining a vibrant community of learners.</p>
            <form action="">
              <input class="form-control mb-4 border-info" type="email" placeholder="Email address">
              <button class="btn py-4 w-100 btn-primary border-primary-dark">
                <span class="me-2">Subscribe</span>
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M4.99996 10H15.4166M15.4166 10L10.4166 5M15.4166 10L10.4166 15" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </form>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #630

Bootstrap

Solstice

<div class="position-fixed bottom-0 start-0 bg-primary-light" style="z-index: 50;">
  <div class="d-flex flex-wrap align-items-start">
    <div class="container py-16 pt-lg-24">
      <div class="py-12 py-md-6 px-12 px-sm-20 px-md-12 px-lg-6 w-100 bg-white border border-2 border-info rounded-3 rounded-pill">
        <div class="row align-items-center">
          <div class="col-12 col-md-7 col-lg-6 mb-10 mb-md-0">
            <div class="mw-md d-flex align-items-center">
              <span>
                <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.5 13.6667C15.1945 13.6667 15.785 13.4233 16.2717 12.9367C16.7583 12.45 17.0011 11.86 17 11.1667C17 10.4722 16.7567 9.88166 16.27 9.39499C15.7833 8.90833 15.1933 8.66555 14.5 8.66666C13.8056 8.66666 13.215 8.91 12.7283 9.39666C12.2417 9.88333 11.9989 10.4733 12 11.1667C12 11.8611 12.2433 12.4517 12.73 12.9383C13.2167 13.425 13.8067 13.6678 14.5 13.6667ZM11.1667 22C11.8611 22 12.4517 21.7567 12.9383 21.27C13.425 20.7833 13.6678 20.1933 13.6667 19.5C13.6667 18.8056 13.4233 18.215 12.9367 17.7283C12.45 17.2417 11.86 16.9989 11.1667 17C10.4722 17 9.88168 17.2433 9.39501 17.73C8.90834 18.2167 8.66557 18.8067 8.66668 19.5C8.66668 20.1944 8.91001 20.785 9.39668 21.2717C9.88334 21.7583 10.4733 22.0011 11.1667 22ZM22 23.6667C22.4722 23.6667 22.8683 23.5067 23.1883 23.1867C23.5083 22.8667 23.6678 22.4711 23.6667 22C23.6667 21.5278 23.5067 21.1317 23.1867 20.8117C22.8667 20.4917 22.4711 20.3322 22 20.3333C21.5278 20.3333 21.1317 20.4933 20.8117 20.8133C20.4917 21.1333 20.3322 21.5289 20.3333 22C20.3333 22.4722 20.4933 22.8683 20.8133 23.1883C21.1333 23.5083 21.5289 23.6678 22 23.6667ZM17 33.6667C14.6945 33.6667 12.5278 33.2289 10.5 32.3533C8.47223 31.4778 6.70834 30.2906 5.20834 28.7917C3.70834 27.2917 2.52112 25.5278 1.64668 23.5C0.772233 21.4722 0.334455 19.3056 0.333344 17C0.333344 14.6667 0.833344 12.3889 1.83334 10.1667C2.83334 7.94444 4.22945 6.02777 6.02168 4.41666C7.81168 2.80555 9.93557 1.62499 12.3933 0.874994C14.8511 0.124994 17.5389 0.0555499 20.4567 0.666661C20.2067 1.91666 20.29 3.09055 20.7067 4.18833C21.1233 5.28611 21.7483 6.20944 22.5817 6.95833C23.415 7.70833 24.4011 8.22222 25.54 8.5C26.6789 8.77777 27.8733 8.70833 29.1233 8.29166C28.2622 10.2083 28.415 11.8472 29.5817 13.2083C30.7483 14.5694 32.0822 15.2778 33.5833 15.3333C33.8333 17.8056 33.5695 20.1528 32.7917 22.375C32.0139 24.5972 30.8678 26.5417 29.3533 28.2083C27.84 29.875 26.0206 31.2017 23.895 32.1883C21.7695 33.175 19.4711 33.6678 17 33.6667Z" fill="#282828"></path>
                </svg>
              </span>
              <p class="ms-6 mb-0">By clicking “Accept All Cookies”, you agree to the storing of cookies on your device.</p>
            </div>
          </div>
          <div class="col-12 col-md-5 col-lg-6">
            <div class="row justify-content-end g-4">
              <div class="col-12 col-md-auto">
                <div class="d-inline-block bg-white rounded-pill"><a class="btn btn-sm py-4 btn-outline-light fs-6 text-dark w-100" href="#">Decline</a></div>
              </div>
              <div class="col-12 col-md-auto"><a class="btn btn-sm py-4 btn-primary fs-6 w-100" href="#">Allow</a></div>
            </div>
          </div>
        </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #631

Bootstrap

Solstice

<section class="p-6 bg-white">
  <div class="pt-12 pt-md-20 pb-8 px-8 bg-primary-light">
    <div class="container">
      <div class="row mb-16 mb-md-20 mb-lg-32">
        <div class="col-lg-4 mb-16 mb-lg-0">
          <div class="d-flex flex-column h-100">
            <a class="d-inline-block mb-12" href="#">
              <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
            </a>
            <div class="d-flex mt-auto">
              <a class="btn me-3 btn-outline-info p-1 border-0 rounded" href="#">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22.46 6C21.69 6.35 20.86 6.58 20 6.69C20.88 6.16 21.56 5.32 21.88 4.31C21.05 4.81 20.13 5.16 19.16 5.36C18.37 4.5 17.26 4 16 4C13.65 4 11.73 5.92 11.73 8.29C11.73 8.63 11.77 8.96 11.84 9.27C8.28001 9.09 5.11001 7.38 3.00001 4.79C2.63001 5.42 2.42001 6.16 2.42001 6.94C2.42001 8.43 3.17001 9.75 4.33001 10.5C3.62001 10.5 2.96001 10.3 2.38001 10V10.03C2.38001 12.11 3.86001 13.85 5.82001 14.24C5.19074 14.4122 4.5301 14.4362 3.89001 14.31C4.16162 15.1625 4.69355 15.9084 5.41103 16.4429C6.1285 16.9775 6.99546 17.2737 7.89001 17.29C6.37364 18.4904 4.494 19.1393 2.56001 19.13C2.22001 19.13 1.88001 19.11 1.54001 19.07C3.44001 20.29 5.70001 21 8.12001 21C16 21 20.33 14.46 20.33 8.79C20.33 8.6 20.33 8.42 20.32 8.23C21.16 7.63 21.88 6.87 22.46 6Z" fill="#5A5A5A"></path>
                </svg>
              </a>
              <a class="btn me-3 btn-outline-info p-1 border-0 rounded" href="#">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M19 3C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19ZM18.5 18.5V13.2C18.5 12.3354 18.1565 11.5062 17.5452 10.8948C16.9338 10.2835 16.1046 9.94 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17C14.6813 12.17 15.0374 12.3175 15.2999 12.5801C15.5625 12.8426 15.71 13.1987 15.71 13.57V18.5H18.5ZM6.88 8.56C7.32556 8.56 7.75288 8.383 8.06794 8.06794C8.383 7.75288 8.56 7.32556 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19C6.43178 5.19 6.00193 5.36805 5.68499 5.68499C5.36805 6.00193 5.19 6.43178 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56ZM8.27 18.5V10.13H5.5V18.5H8.27Z" fill="#5A5A5A"></path>
                </svg>
              </a>
              <a class="btn btn-outline-info p-1 border-0 rounded" href="#">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.8 2H16.2C19.4 2 22 4.6 22 7.8V16.2C22 17.7383 21.3889 19.2135 20.3012 20.3012C19.2135 21.3889 17.7383 22 16.2 22H7.8C4.6 22 2 19.4 2 16.2V7.8C2 6.26174 2.61107 4.78649 3.69878 3.69878C4.78649 2.61107 6.26174 2 7.8 2ZM7.6 4C6.64522 4 5.72955 4.37928 5.05442 5.05442C4.37928 5.72955 4 6.64522 4 7.6V16.4C4 18.39 5.61 20 7.6 20H16.4C17.3548 20 18.2705 19.6207 18.9456 18.9456C19.6207 18.2705 20 17.3548 20 16.4V7.6C20 5.61 18.39 4 16.4 4H7.6ZM17.25 5.5C17.5815 5.5 17.8995 5.6317 18.1339 5.86612C18.3683 6.10054 18.5 6.41848 18.5 6.75C18.5 7.08152 18.3683 7.39946 18.1339 7.63388C17.8995 7.8683 17.5815 8 17.25 8C16.9185 8 16.6005 7.8683 16.3661 7.63388C16.1317 7.39946 16 7.08152 16 6.75C16 6.41848 16.1317 6.10054 16.3661 5.86612C16.6005 5.6317 16.9185 5.5 17.25 5.5ZM12 7C13.3261 7 14.5979 7.52678 15.5355 8.46447C16.4732 9.40215 17 10.6739 17 12C17 13.3261 16.4732 14.5979 15.5355 15.5355C14.5979 16.4732 13.3261 17 12 17C10.6739 17 9.40215 16.4732 8.46447 15.5355C7.52678 14.5979 7 13.3261 7 12C7 10.6739 7.52678 9.40215 8.46447 8.46447C9.40215 7.52678 10.6739 7 12 7ZM12 9C11.2044 9 10.4413 9.31607 9.87868 9.87868C9.31607 10.4413 9 11.2044 9 12C9 12.7956 9.31607 13.5587 9.87868 14.1213C10.4413 14.6839 11.2044 15 12 15C12.7956 15 13.5587 14.6839 14.1213 14.1213C14.6839 13.5587 15 12.7956 15 12C15 11.2044 14.6839 10.4413 14.1213 9.87868C13.5587 9.31607 12.7956 9 12 9Z" fill="#5A5A5A"></path>
                </svg>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #632

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light">
  <div class="container">
    <div class="text-center mb-20">
      <h3 class="font-heading mb-4">Join our events</h3>
      <p class="text-light-dark">Engage in our weekly online events featuring mindfulness sessions, journaling, and fireside chats.</p>
    </div>
    <div class="overflow-scroll pb-2 mb-12">
      <div style="min-width: max-content;">
        <div class="pt-6 pb-6 px-8 bg-white border border-light rounded-3 mw-6xl mx-auto overflow-hidden" style="height: 524px;">
          <div class="d-flex mw-6xl mx-auto mb-4 flex-wrap align-items-center justify-content-between">
            <div>
              <select class="form-select ps-1 py-1 pe-9 border-0 fw-bold" name="" id="">
                <option value="1">August 2023</option>
                <option value="2">July 2023</option>
                <option value="3">June 2023</option>
              </select>
            </div>
            <div class="d-flex flex-wrap align-items-center">
              <span class="d-inline-block py-3 px-4 me-2 small fw-semibold lh-1 border border-light rounded-pill shadow">Today</span>
              <button class="btn btn-outline-light p-0 me-2 shadow d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.125 16.25L6.875 10L13.125 3.75" stroke="#282828" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #633

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 position-relative">
  <div class="position-relative pt-12 pt-lg-24 pb-12 pb-lg-16 mb-8">
    <div class="position-absolute top-0 start-0 w-100 h-100 bg-primary">
      <div class="d-flex justify-content-center overflow-hidden">
        <div class="flex-shrink-0 mt-n40 mt-sm-n6 me-6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
        <div class="flex-shrink-0 mt-n40 mt-sm-n32 me-6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
        <div class="flex-shrink-0 mt-n40 mt-sm-n32 me-6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
        <div class="flex-shrink-0 mt-n40 mt-sm-n6 rounded-3" style="width: 324px; height: 340px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
      </div>
    </div>
    <div class="container position-relative">
      <div class="mw-5xl mx-auto">
        <a class="d-inline-flex mb-14 align-items-center text-white fw-bold" href="#">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.4167 10H5M5 10L10 5M5 10L10 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="ms-2">Back to Blog</span>
        </a>
        <div class="row">
          <div class="col-md-6 col-lg-6 mb-12 mb-md-0">
            <div>
              <div class="d-flex flex-wrap align-items-center mb-n4">
                <span class="badge mb-4 me-3 text-white fw-medium border">Product</span>
                <span class="badge mb-4 text-white fw-medium border">Development</span>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #634

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light overflow-hidden">
  <div class="container">
    <div class="mw-5xl mx-auto">
      <div class="mb-16">
        <svg width="176" height="176" viewBox="0 0 176 176" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_256_5411)">
            <rect width="176" height="176" rx="48" fill="#FF7100"></rect>
            <path d="M154 77V49.5C154 46.4624 151.538 44 148.5 44L132 44C128.963 44 126.5 46.4624 126.5 49.5V71.5C126.5 89.7254 111.726 104.5 93.5003 104.5L71.5003 104.5C68.4627 104.5 66.0003 106.962 66.0003 110V126.5C66.0003 129.538 68.4627 132 71.5003 132L99.0003 132C129.376 132 154 107.376 154 77Z" fill="white"></path>
            <path d="M22 99L22 126.5C22 129.538 24.4624 132 27.5 132H44C47.0376 132 49.5 129.538 49.5 126.5V104.5C49.5 86.2746 64.2746 71.5 82.5 71.5H104.5C107.538 71.5 110 69.0376 110 66V49.5C110 46.4624 107.538 44 104.5 44L77 44C46.6243 44 22 68.6243 22 99Z" fill="white"></path>
          </g>
        </svg>
      </div>
      <h3 class="font-heading mb-10">Careers at Solstice</h3>
      <div class="mb-16 p-6 rounded-2 border border-primary">
        <p class="mb-0">
          <span>Check out our</span>
          <a class="d-inline-flex align-items-center fw-bold" href="#">
            <span class="me-1">Open Roles</span>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.16663 10C2.16663 5.67616 5.6761 2.16669 9.99996 2.16669C14.3238 2.16669 17.8333 5.67616 17.8333 10C17.8333 14.3239 14.3238 17.8334 9.99996 17.8334C5.6761 17.8334 2.16663 14.3239 2.16663 10ZM10.7952 13.7119L13.2952 11.2119C13.7321 10.775 13.7321 10.0584 13.2952 9.62147C12.8583 9.18454 12.1417 9.18454 11.7047 9.62147L11.125 10.2012V7.08335C11.125 6.46554 10.6178 5.95835 9.99996 5.95835C9.38215 5.95835 8.87496 6.46554 8.87496 7.08335V10.2012L8.29518 9.62147C7.85825 9.18454 7.14167 9.18454 6.70474 9.62147C6.26781 10.0584 6.26781 10.775 6.70474 11.2119L9.20474 13.7119C9.42845 13.9356 9.71617 14.0417 9.99996 14.0417C10.2837 14.0417 10.5715 13.9356 10.7952 13.7119Z" fill="currentColor" stroke="currentColor"></path>
            </svg>
          </a>
          <span>at the bottom of the page</span>
        </p>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #635

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-secondary">
  <div class="container position-relative">
    <div class="mw-6xl mx-auto">
      <div class="mw-3xl mx-auto mb-20 text-center">
        <h2 class="font-heading mb-6 text-white">Blog</h2>
        <p class="display-5 text-secondary-light">Discover the latest news, tips and user stories insights from Solstice.</p>
      </div>
      <a class="d-block mb-20" href="#">
        <div class="row align-items-center">
          <div class="col-12 col-md-5 mb-12 mb-md-0">
            <div class="position-relative mw-md-md rounded-3 overflow-hidden">
              <div class="position-absolute top-0 start-0">
                <svg width="155" height="154" viewBox="0 0 155 154" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M-34 79.9324V153.361C-34 153.714 -33.7141 154 -33.3615 154H17.62C17.9724 154 18.2585 153.714 18.2585 153.361V94.299C18.2585 55.5087 56.5087 17.2585 95.299 17.2585H154.361C154.714 17.2585 155 16.9724 155 16.62V-34.3615C155 -34.7139 154.714 -35 154.361 -35H80.9324C17.4572 -35 -34 16.4572 -34 79.9324Z" fill="#FF7100"></path>
                </svg>
              </div>
              <div class="position-absolute bottom-0 end-0">
                <svg width="154" height="158" viewBox="0 0 154 158" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M189 74.0676V0.638514C189 0.286054 188.714 0 188.361 0H137.38C137.028 0 136.742 0.286054 136.742 0.638514V59.701C136.742 98.4913 98.4914 136.742 59.701 136.742H0.638514C0.286054 136.742 0 137.028 0 137.38V188.361C0 188.714 0.286054 189 0.638514 189H74.0676C137.543 189 189 137.543 189 74.0676Z" fill="#FF7100"></path>
                </svg>
              </div>
              <img class="img-fluid d-block w-100 ms-auto" src="solstice-assets/images/blog/picture-large.png" alt="">
            </div>
          </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #636

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light">
  <div class="container position-relative">
    <div class="mw-md mw-md-xl mx-auto mw-lg-6xl">
      <div class="mb-20 mb-md-32">
        <div class="row">
          <div class="col-12 col-lg-5 mb-12 mb-lg-0">
            <div class="mw-lg-md h-100">
              <img class="img-fluid d-block h-100 w-100 rounded-3" style="object-fit: cover;" src="solstice-assets/images/about/picture4.png" alt="">
            </div>
          </div>
          <div class="col-12 col-lg-7">
            <div class="mw-lg py-lg-16">
              <span class="badge d-inline-flex align-items-center mb-6 bg-primary-light text-primary border border-info">
                <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="4" r="3" fill="#FF7100"></circle></svg>
                <span class="ms-1 lh-base">About Us</span>
              </span>
              <h2 class="font-heading mb-6">On a mission to make learning fun</h2>
              <p class="fs-5 text-light-dark mb-0">We are driven to transform the landscape of learning into a captivating journey of excitement and discovery. Our aim is to infuse every educational experience with the essence of joy, making learning an immersive adventure that fuels curiosity and fosters growth.</p>
            </div>
          </div>
        </div>
      </div>
      <h4 class="text-center mb-8">Our investors</h4>
      <div class="mb-20 mb-md-32 py-8 border rounded-3">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #637

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light position-relative overflow-hidden">
  <div class="position-absolute top-0 start-0 w-100">
    <div class="mw-6xl mx-auto d-flex align-items-start justify-content-between">
      <div>
        <svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.5 498.311V304.054C0.5 136.406 136.406 0.5 304.054 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919V136.561C499.5 137.217 498.967 137.75 498.311 137.75H342.061C290.59 137.75 239.516 163.123 201.319 201.319C163.123 239.516 137.75 290.59 137.75 342.061V498.311C137.75 498.967 137.217 499.5 136.561 499.5H1.68919C1.03249 499.5 0.5 498.967 0.5 498.311Z" fill="url(#paint0_linear_254_11537)" stroke="#FFE0A5"></path>
          <defs><linearGradient id="paint0_linear_254_11537" x1="0" y1="500" x2="500" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE0A5"><stop offset="1" stop-color="#FFE0A5" stop-opacity="0"></stop></stop></linearGradient></defs>
        </svg>
      </div>
      <div>
        <svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M499.5 1.68919V195.946C499.5 363.594 363.594 499.5 195.946 499.5H1.68919C1.03289 499.5 0.5 498.967 0.5 498.311V363.439C0.5 362.783 1.03289 362.25 1.68919 362.25H157.939C209.41 362.25 260.484 336.877 298.681 298.681C336.877 260.484 362.25 209.41 362.25 157.939V1.68919C362.25 1.03289 362.783 0.5 363.439 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919Z" fill="url(#paint0_linear_254_11536)" stroke="#FFE0A5"></path>
          <defs><linearGradient id="paint0_linear_254_11536" x1="499.998" y1="2.85805e-05" x2="8.49831" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE0A5"><stop offset="1" stop-color="#FFE0A5" stop-opacity="0"></stop></stop></linearGradient></defs>
        </svg>
      </div>
    </div>
  </div>
  <div class="container position-relative">
    <div class="mw-xl mx-auto">
      <div class="text-center mb-12">
        <h3 class="mb-6">Contact us</h3>
        <p class="text-light-dark mb-0">Submit your info and we’ll get back to you as soon as possible.</p>
      </div>
      <div class="p-8 bg-white border border-light rounded-3">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #638

Bootstrap

Solstice

<section class="position-relative bg-primary-light overflow-hidden">
  <div class="mw-6xl mx-auto py-12 py-md-16 py-lg-24 position-relative">
    <div class="position-absolute top-0 h-100 start-0">
      <svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M0.5 498.311V304.054C0.5 136.406 136.406 0.5 304.054 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919V136.561C499.5 137.217 498.967 137.75 498.311 137.75H342.061C290.59 137.75 239.516 163.123 201.319 201.319C163.123 239.516 137.75 290.59 137.75 342.061V498.311C137.75 498.967 137.217 499.5 136.561 499.5H1.68919C1.03249 499.5 0.5 498.967 0.5 498.311Z" fill="url(#paint0_linear_191_13416)" stroke="#FFE0A5"></path>
        <defs><linearGradient id="paint0_linear_191_13416" x1="0" y1="500" x2="500" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE0A5"><stop offset="1" stop-color="#FFE0A5" stop-opacity="0"></stop></stop></linearGradient></defs>
      </svg>
    </div>
    <div class="position-absolute top-0 h-100 end-0">
      <svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M499.5 1.68919V195.946C499.5 363.594 363.594 499.5 195.946 499.5H1.68919C1.03289 499.5 0.5 498.967 0.5 498.311V363.439C0.5 362.783 1.03289 362.25 1.68919 362.25H157.939C209.41 362.25 260.484 336.877 298.681 298.681C336.877 260.484 362.25 209.41 362.25 157.939V1.68919C362.25 1.03289 362.783 0.5 363.439 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919Z" fill="url(#paint0_linear_191_13415)" stroke="#FFE0A5"></path>
        <defs><linearGradient id="paint0_linear_191_13415" x1="499.998" y1="2.85805e-05" x2="8.49831" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE0A5"><stop offset="1" stop-color="#FFE0A5" stop-opacity="0"></stop></stop></linearGradient></defs>
      </svg>
    </div>
    <div class="container position-relative">
      <div class="mw-md mw-md-lg mx-auto text-center">
        <h3 class="font-heading mb-4">Join 14K people embrace fun learning</h3>
        <p class="text-light-dark mb-10">Fuel your curiosity by joining a vibrant community of learners.</p>
        <form action="">
          <div class="row mb-n3">
            <div class="col-md-auto flex-grow-1 mb-3">
              <input class="form-control border-info" type="email" placeholder="Email address">
            </div>
            <div class="col-md-auto flex-shrink-0 mb-3">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #639

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="mw-xl mx-auto mw-lg-5xl">
      <div class="row align-items-end justify-content-between mb-24">
        <div class="col-lg-auto me-auto mb-12 mb-lg-0">
          <span class="badge mb-6 text-primary text-uppercase">Features</span>
          <h3 class="font-heading mb-6">Events and discussion</h3>
          <p class="mw-2xl fs-5 text-light-dark mb-0">Optimize your study environment with a personalized room, tailored to enhance your focus and accommodate group study sessions.</p>
        </div>
        <div class="col-lg-auto text-lg-end">
          <div class="d-inline-block bg-white rounded-pill"><a class="btn btn-outline-light text-dark" href="#">Learn more</a></div>
        </div>
      </div>
      <img class="img-fluid w-100" src="solstice-assets/images/features/events-primary.png" alt="">
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #640

Bootstrap

Solstice

<section class="py-12 py-md-16 py-lg-24 bg-primary-light">
  <div class="container">
    <div class="mw-md mw-md-5xl mx-auto">
      <div class="row">
        <div class="col-12 col-md-6 mb-6 mb-md-0">
          <div class="d-flex flex-column py-6 px-6 px-lg-10 h-100 align-items-center justify-content-center text-center bg-white rounded-3">
            <h4 class="mb-1 h1 text-secondary">101K+</h4>
            <p class="text-dark mb-0">Users studying around the globe</p>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="py-6 px-6 px-lg-10 mb-6 text-center bg-white rounded-3">
            <h4 class="mb-1 h3 text-secondary">2M+</h4>
            <p class="text-dark fw-semibold mb-0">Happy users and keep growing</p>
          </div>
          <div class="py-6 px-6 px-lg-10 text-center bg-white rounded-3">
            <h4 class="mb-1 h2 text-secondary">94K</h4>
            <p class="text-dark fw-semibold mb-0">Supported file extensions</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Framework

UI Library

Components

Bootstrap Component #621

Get the code for 13,400+ components

Bootstrap Component #622

Get the code for 13,400+ components

Bootstrap Component #623

Get the code for 13,400+ components

Bootstrap Component #624

Get the code for 13,400+ components

Bootstrap Component #625

Get the code for 13,400+ components

Bootstrap Component #626

Get the code for 13,400+ components

Bootstrap Component #627

Get the code for 13,400+ components

Bootstrap Component #628

Get the code for 13,400+ components

Bootstrap Component #629

Get the code for 13,400+ components

Bootstrap Component #630

Get the code for 13,400+ components

Bootstrap Component #631

Get the code for 13,400+ components

Bootstrap Component #632

Get the code for 13,400+ components

Bootstrap Component #633

Get the code for 13,400+ components

Bootstrap Component #634

Get the code for 13,400+ components

Bootstrap Component #635

Get the code for 13,400+ components

Bootstrap Component #636

Get the code for 13,400+ components

Bootstrap Component #637

Get the code for 13,400+ components

Bootstrap Component #638

Get the code for 13,400+ components

Bootstrap Component #639

Get the code for 13,400+ components

Bootstrap Component #640

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support