Bootstrap 5 Components

Framework

UI Library

Lifetime Access

Full Shuffle access forever for $249

Pay once, ship unlimited projects. No subscription, no renewals, all future updates included.

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 #3081

Bootstrap

Cronos

<section class="py-20 poistion-relative overflow-hidden">
  <div class="container">
    <div class="mw-md mw-md-3xl mx-auto">
      <div class="position-relative py-8 py-lg-12 px-6 pe-md-16 mb-12 mb-md-4 bg-warning-light"><img class="position-absolute top-0 start-0 translate-middle" src="cronos-assets/elements/warning-two-green.svg" alt=""/><img class="position-absolute top-100 start-100 translate-middle" src="cronos-assets/elements/warning-two-green2.svg" alt=""/>
        <div class="d-flex"><span class="me-8"><img src="cronos-assets/elements/quote-gold.svg" alt=""/></span>
          <div>
            <p class="lead lh-lg">On the other hand, perfection can also haunt some of us to the point of inaction. While some are too quick to act and end up wasting resources, others are completely paralyzed by the &ldquo;excessive&rdquo; amount of work behind building something new. There&rsquo;s just &ldquo;so much to get done&rdquo; before delivering the product to the user that we end up feeling frustrated and overwhelmed.</p>
          </div>
        </div>
      </div>
      <p class="text-muted text-center">Danny Bailey, CEO &amp; Founder at Wireframes</p>
    </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 #3082

Bootstrap

Cronos

<section class="py-20">
  <div class="container">
    <div class="row bg-white shadow-lg">
      <div class="col-12 col-md-6 col-lg-4 py-20 border-bottom border-end">
        <div class="mw-xs px-md-5 mx-auto text-center"><span>
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14 40H40" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8 40V34L34 8L40 14L14 40H8Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M34 20L28 14" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
          <h6 class="mt-8 mb-4 fw-normal">Change of access</h6>
          <p class="lead lh-lg text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4 py-20 border-bottom border-end">
        <div class="mw-xs px-md-5 mx-auto text-center"><span>
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M24 44C24 44 40 36 40 24V10L24 4L8 10V24C8 36 24 44 24 44Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M16 23L22 29L34 17" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
          <h6 class="mt-6 mb-4 fw-normal">Security in savings</h6>
          <p class="lead lh-lg text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
        </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 #3083

Bootstrap

Cronos

<section class="py-20 overflow-hidden">
  <div class="container">
    <div class="px-24 pt-14 pb-8 bg-light-light position-relative"><img class="d-none d-md-block position-absolute top-0 start-0 translate-middle" src="cronos-assets/elements/left-squares.svg" alt=""/><img class="d-none d-md-block position-absolute top-100 start-100 translate-middle" src="cronos-assets/elements/right-squares.svg" alt=""/>
      <h6 class="mb-4 fw-normal text-center">Trusted by brands all over the world</h6>
      <div class="row align-items-center">
        <div class="col-12 col-md-4 col-lg-2">
          <div class="py-8 py-lg-14"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/slack-color.svg" alt=""/></div>
        </div>
        <div class="col-12 col-md-4 col-lg-2">
          <div class="py-8 py-lg-14"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/dropbox-color.svg" alt=""/></div>
        </div>
        <div class="col-12 col-md-4 col-lg-2">
          <div class="py-8 py-lg-14"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/spotify-color.svg" alt=""/></div>
        </div>
        <div class="col-12 col-md-4 col-lg-2">
          <div class="py-8 py-lg-14"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/amazon-color.svg" alt=""/></div>
        </div>
        <div class="col-12 col-md-4 col-lg-2">
          <div class="py-8 py-lg-14"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/netflix-color.svg" alt=""/></div>
        </div>
        <div class="col-12 col-md-4 col-lg-2">
          <div class="py-8 py-lg-14"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/stripe-color.svg" alt=""/></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 #3084

Bootstrap

Cronos

<section class="py-20">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-6 mb-10 mb-lg-0 position-relative"><img class="d-none d-lg-block position-absolute top-0 start-0 ms-n3" style="width: 296px; height: 296px;" src="cronos-assets/elements/dark-green-dark-warning-right.svg" alt=""/>
        <div class="d-flex flex-column mx-auto" style="width: 296px;"><img class="ms-auto" style="width: 148px; height: 148px;" src="cronos-assets/elements/grey-square.svg" alt=""/>
          <div class="d-flex justify-content-end align-items-end"><img class="d-none d-lg-block" style="width: 148px; height: 148px;" src="cronos-assets/elements/grey-square.svg" alt=""/><img class="ms-auto img-fluid" style="width: 296px; height: 296px; object-fit: cover;" src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=890&amp;q=80" alt=""/></div>
          <div class="d-flex justify-content-end"><img style="width: 148px; height: 148px;" src="cronos-assets/elements/grey-square.svg" alt=""/><img class="img-fluid" style="height: 148px; width: 148px; object-fit: cover;" src="https://images.unsplash.com/photo-1600275669439-14e40452d20b?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt=""/></div>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="mw-lg-sm mx-auto">
          <h2 class="mb-6">Expand your brand with this excellent extension tool</h2>
          <p class="lead lh-lg text-muted mb-6">With this tool, you will get much better results at work and develop new skills. Will you take the risk of trying the latest version of our application?</p><a class="btn btn-primary d-block d-md-inline-block mb-6 mb-md-0 mb-lg-0 me-md-8" href="#">Try Demo</a><a class="link-dark text-decoration-none fw-bold" href="#">Learn more about Cronos<span class="inline-block ms-2">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 12H20" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M14 18L20 12L14 6" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></span></a>
        </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 #3085

Bootstrap

Cronos

<section class="py-20 bg-primary">
  <div class="container">
    <div class="row bg-white">
      <div class="col-12 col-md-6 col-lg-4 py-20 shadow-lg">
        <div class="mw-xs px-md-5 mx-auto text-center"><span>
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14 40H40" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8 40V34L34 8L40 14L14 40H8Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M34 20L28 14" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
          <h6 class="mt-8 mb-4 fw-normal">Change of access</h6>
          <p class="lead lh-lg text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4 py-20 shadow-lg">
        <div class="mw-xs px-md-5 mx-auto text-center"><span>
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M24 44C24 44 40 36 40 24V10L24 4L8 10V24C8 36 24 44 24 44Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M16 23L22 29L34 17" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
          <h6 class="mt-6 mb-4 fw-normal">Security in savings</h6>
          <p class="lead lh-lg text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
        </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 #3086

Bootstrap

Cronos

<section class="py-20">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-6 mb-10 mb-lg-0">
        <div class="mw-lg-sm mx-auto">
          <h2 class="mb-6">Expand your brand with this excellent extension tool</h2>
          <p class="lead lh-lg text-muted mb-6">With this tool, you will get much better results at work and develop new skills. Will you take the risk of trying the latest version of our application?</p><a class="btn btn-primary d-block d-md-inline-block mb-6 mb-md-0 mb-lg-0 me-md-4" href="#">Try Demo</a><a class="link-dark text-decoration-none fw-bold" href="#">Learn more about Cronos<span class="inline-block ms-2">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 12H20" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M14 18L20 12L14 6" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></span></a>
        </div>
      </div>
      <div class="col-12 col-lg-6 position-relative"><img class="d-none d-lg-block position-absolute top-0 start-0 ms-n3" style="width: 296px; height: 296px;" src="cronos-assets/elements/dark-green-dark-warning-right.svg" alt=""/>
        <div class="d-flex flex-column mx-auto" style="width: 296px;"><img class="ms-auto" style="width: 148px; height: 148px;" src="cronos-assets/elements/grey-square.svg" alt=""/>
          <div class="d-flex justify-content-end align-items-end"><img class="d-none d-lg-block" style="width: 148px; height: 148px;" src="cronos-assets/elements/grey-square.svg" alt=""/><img class="ms-auto img-fluid" style="width: 296px; height: 296px; object-fit: cover;" src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=890&amp;q=80" alt=""/></div>
          <div class="d-flex justify-content-end"><img style="width: 148px; height: 148px;" src="cronos-assets/elements/grey-square.svg" alt=""/><img class="img-fluid" style="height: 148px; width: 148px; object-fit: cover;" src="https://images.unsplash.com/photo-1600275669439-14e40452d20b?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt=""/></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 #3087

Bootstrap

Cronos

<section class="py-20">
  <div class="container">
    <h6 class="mb-8 fw-normal text-center">Trusted by brands all over the world</h6>
    <div class="row align-items-center">
      <div class="col-12 col-md-4 col-lg-2 mb-6 mb-lg-0">
        <div class="bg-light-light py-14"><img class="d-block mx-auto img-fluid" src="cronos-assets/logos/brands/slack-color.svg" alt=""/></div>
      </div>
      <div class="col-12 col-md-4 col-lg-2 mb-6 mb-lg-0">
        <div class="bg-light-light py-14"><img class="d-block mx-auto img-fluid" src="cronos-assets/logos/brands/dropbox-color.svg" alt=""/></div>
      </div>
      <div class="col-12 col-md-4 col-lg-2 mb-6 mb-lg-0">
        <div class="bg-light-light py-14"><img class="d-block mx-auto img-fluid" src="cronos-assets/logos/brands/spotify-color.svg" alt=""/></div>
      </div>
      <div class="col-12 col-md-4 col-lg-2 mb-6 mb-md-0">
        <div class="bg-light-light py-14"><img class="d-block mx-auto img-fluid" src="cronos-assets/logos/brands/amazon-color.svg" alt=""/></div>
      </div>
      <div class="col-12 col-md-4 col-lg-2 mb-6 mb-md-0">
        <div class="bg-light-light py-14"><img class="d-block mx-auto img-fluid" src="cronos-assets/logos/brands/netflix-color.svg" alt=""/></div>
      </div>
      <div class="col-12 col-md-4 col-lg-2">
        <div class="bg-light-light py-14"><img class="d-block mx-auto img-fluid" src="cronos-assets/logos/brands/stripe-color.svg" alt=""/></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 #3088

Bootstrap

Cronos

<section class="py-20 poistion-relative overflow-hidden">
  <div class="container">
    <div class="mw-2xl mx-auto">
      <h3 class="mb-6">When I was a developer, I often had a hundred questions when</h3>
      <p class="mb-12 lead lh-lg text-muted">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <div class="mb-12 position-relative" style="height: 448px;"><img class="d-none d-lg-block position-absolute top-0 start-100 translate-middle-x" style="height: 112px;" src="cronos-assets/elements/warning-group-square.svg" alt=""/><img class="d-none d-lg-block position-absolute bottom-0 start-0 translate-middle-x" style="height: 112px;" src="cronos-assets/elements/light-squares.svg" alt=""/><img class="img-fluid h-100 w-100" style="object-fit: cover;" src="https://images.unsplash.com/photo-1501854140801-50d01698950b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1300&amp;q=80" alt=""/></div>
      <p class="mb-8 lead lh-lg text-muted">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <p class="mb-8 lead lh-lg text-muted">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it&rsquo;s easy to lose track. To save time and energy for myself, I gathered all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
    </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 #3089

Bootstrap

Cronos

<section class="py-20">
  <div class="container">
    <div class="mb-24 mx-auto text-center">
      <div class="mw-4xl mx-auto"><span class="badge bg-warning-light">New feature</span>
        <h2 class="mt-6 mb-4">Take quick action that increases your brand&apos;s regular profit.</h2>
        <p class="mw-xl mx-auto mb-12 lead lh-lg text-muted">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p><img class="img-fluid" style="max-height: 495px;" src="cronos-assets/images/laptop.png" alt=""/>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-4 text-center"><span>
          <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 40H40" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M8 40V34L34 8L40 14L14 40H8Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M34 20L28 14" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></span>
        <div class="mt-6 mw-xs px-lg-4 mx-auto">
          <h6 class="mb-4 fw-normal">Change of access</h6>
          <p class="lead lh-lg text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="col-12 col-lg-4 text-center"><span>
          <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M24 44C24 44 40 36 40 24V10L24 4L8 10V24C8 36 24 44 24 44Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M16 23L22 29L34 17" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

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 #3090

Bootstrap

Cronos

<section class="py-20 bg-primary">
  <div class="container">
    <div class="row bg-white shadow-lg">
      <div class="col-12 col-md-6 col-lg-4 py-20 border-bottom border-end">
        <div class="mw-xs px-md-5 mx-auto text-center"><span>
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14 40H40" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8 40V34L34 8L40 14L14 40H8Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M34 20L28 14" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
          <h6 class="mt-8 mb-4 fw-normal">Change of access</h6>
          <p class="lead lh-lg text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4 py-20 border-bottom border-end">
        <div class="mw-xs px-md-5 mx-auto text-center"><span>
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M24 44C24 44 40 36 40 24V10L24 4L8 10V24C8 36 24 44 24 44Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M16 23L22 29L34 17" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
          <h6 class="mt-6 mb-4 fw-normal">Security in savings</h6>
          <p class="lead lh-lg text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
        </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 #3091

Bootstrap

Cronos

<section class="py-20">
  <div class="container">
    <div class="row align-items-center">
      <div class="d-none d-lg-block col-lg-auto">
        <button class="btn btn-light d-flex align-items-center justify-content-center p-0" style="width: 64px; height: 64px;">
          <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.70711 12H18.5C18.7761 12 19 12.2239 19 12.5C19 12.7761 18.7761 13 18.5 13H8.70711L11.8536 16.1464C12.0488 16.3417 12.0488 16.6583 11.8536 16.8536C11.6583 17.0488 11.3417 17.0488 11.1464 16.8536L7.14645 12.8536C6.95118 12.6583 6.95118 12.3417 7.14645 12.1464L11.1464 8.14645C11.3417 7.95118 11.6583 7.95118 11.8536 8.14645C12.0488 8.34171 12.0488 8.65829 11.8536 8.85355L8.70711 12Z" fill="#1C1917"></path>
          </svg>
        </button>
      </div>
      <div class="d-flex justify-content-center mb-10 d-lg-none">
        <button class="btn btn-light d-flex align-items-center justify-content-center p-0 me-4" style="width: 64px; height: 64px;">
          <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.70711 12H18.5C18.7761 12 19 12.2239 19 12.5C19 12.7761 18.7761 13 18.5 13H8.70711L11.8536 16.1464C12.0488 16.3417 12.0488 16.6583 11.8536 16.8536C11.6583 17.0488 11.3417 17.0488 11.1464 16.8536L7.14645 12.8536C6.95118 12.6583 6.95118 12.3417 7.14645 12.1464L11.1464 8.14645C11.3417 7.95118 11.6583 7.95118 11.8536 8.14645C12.0488 8.34171 12.0488 8.65829 11.8536 8.85355L8.70711 12Z" fill="#1C1917"></path>
          </svg>
        </button>
        <button class="btn btn-light d-flex align-items-center justify-content-center p-0" style="width: 64px; height: 64px;">
          <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.2929 13H7.5C7.22386 13 7 12.7761 7 12.5C7 12.2239 7.22386 12 7.5 12H17.2929L14.1464 8.85355C13.9512 8.65829 13.9512 8.34171 14.1464 8.14645C14.3417 7.95118 14.6583 7.95118 14.8536 8.14645L18.8536 12.1464C19.0488 12.3417 19.0488 12.6583 18.8536 12.8536L14.8536 16.8536C14.6583 17.0488 14.3417 17.0488 14.1464 16.8536C13.9512 16.6583 13.9512 16.3417 14.1464 16.1464L17.2929 13Z" fill="#1C1917"></path>
          </svg>
        </button>
      </div>
      <div class="col-12 col-lg-8 mx-auto text-center"><span class="badge bg-secondary-light">New Feature</span>
        <h2 class="mt-6 mb-4">Expand your brand with this excellent extension tool</h2>

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 #3092

Bootstrap

Cronos

<section class="py-20">
  <div class="container">
    <h6 class="mb-16 fw-normal text-center">Trusted by brands all over the world</h6>
    <div class="row align-items-center">
      <div class="col-12 col-md-4 col-lg-2 mb-12 mb-lg-0"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/slack-color.svg" alt=""/></div>
      <div class="col-12 col-md-4 col-lg-2 mb-12 mb-lg-0"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/dropbox-color.svg" alt=""/></div>
      <div class="col-12 col-md-4 col-lg-2 mb-12 mb-lg-0"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/spotify-color.svg" alt=""/></div>
      <div class="col-12 col-md-4 col-lg-2 mb-12 mb-md-0"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/amazon-color.svg" alt=""/></div>
      <div class="col-12 col-md-4 col-lg-2 mb-12 mb-md-0"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/netflix-color.svg" alt=""/></div>
      <div class="col-12 col-md-4 col-lg-2"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/stripe-color.svg" alt=""/></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 #3093

Bootstrap

Cronos

<section class="overflow-hidden pb-20">
  <div class="pb-40 pb-md-64 bg-primary">
    <div class="container pt-20 text-center">
      <div class="mw-4xl mx-auto mb-12"><span class="badge bg-success text-white">New feature</span>
        <h2 class="mt-6 mb-4 text-white">Take quick action that increases your brand&apos;s regular profit.</h2>
        <p class="mw-2xl mb-6 mx-auto text-light lead lh-lg">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      </div>
      <div class="position-relative mw-4xl mx-auto">
        <div class="d-flex position-absolute start-0 end-0">
          <div class="position-relative w-100"><img class="img-fluid w-100" style="max-height: 495px;" src="cronos-assets/images/laptop.png" alt=""/></div>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-white pt-40 pt-md-64 pt-lg-80">
    <div class="row">
      <div class="col-12 col-lg-4 text-center mb-8 mb-lg-0"><span>
          <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 40H40" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M8 40V34L34 8L40 14L14 40H8Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M34 20L28 14" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></span>
        <div class="mt-6 mw-xs px-lg-4 mx-auto">
          <h6 class="mb-4 fw-normal">Change of access</h6>

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 #3094

Bootstrap

Cronos

<section class="py-20">
  <div class="container">
    <h6 class="mb-16 fw-normal text-center">Trusted by brands all over the world</h6>
    <div class="row align-items-center">
      <div class="col-12 col-md-4 col-lg-2 mb-12 mb-lg-0"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/slack-grey.svg" alt=""/></div>
      <div class="col-12 col-md-4 col-lg-2 mb-12 mb-lg-0"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/dropbox-grey.svg" alt=""/></div>
      <div class="col-12 col-md-4 col-lg-2 mb-12 mb-lg-0"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/spotify-grey.svg" alt=""/></div>
      <div class="col-12 col-md-4 col-lg-2 mb-12 mb-md-0"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/amazon-grey.svg" alt=""/></div>
      <div class="col-12 col-md-4 col-lg-2 mb-12 mb-md-0"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/netflix-grey.svg" alt=""/></div>
      <div class="col-12 col-md-4 col-lg-2"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/stripe-grey.svg" alt=""/></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 #3095

Bootstrap

Cronos

<section class="py-20 bg-primary">
  <div class="container">
    <div class="row align-items-center">
      <div class="d-none d-lg-block col-lg-auto">
        <button class="btn btn-success d-flex align-items-center justify-content-center p-0" style="width: 64px; height: 64px;">
          <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.70711 12H18.5C18.7761 12 19 12.2239 19 12.5C19 12.7761 18.7761 13 18.5 13H8.70711L11.8536 16.1464C12.0488 16.3417 12.0488 16.6583 11.8536 16.8536C11.6583 17.0488 11.3417 17.0488 11.1464 16.8536L7.14645 12.8536C6.95118 12.6583 6.95118 12.3417 7.14645 12.1464L11.1464 8.14645C11.3417 7.95118 11.6583 7.95118 11.8536 8.14645C12.0488 8.34171 12.0488 8.65829 11.8536 8.85355L8.70711 12Z" fill="#1C1917"></path>
          </svg>
        </button>
      </div>
      <div class="d-flex justify-content-center mb-10 d-lg-none">
        <button class="btn btn-light d-flex align-items-center justify-content-center p-0 me-4" style="width: 64px; height: 64px;">
          <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.70711 12H18.5C18.7761 12 19 12.2239 19 12.5C19 12.7761 18.7761 13 18.5 13H8.70711L11.8536 16.1464C12.0488 16.3417 12.0488 16.6583 11.8536 16.8536C11.6583 17.0488 11.3417 17.0488 11.1464 16.8536L7.14645 12.8536C6.95118 12.6583 6.95118 12.3417 7.14645 12.1464L11.1464 8.14645C11.3417 7.95118 11.6583 7.95118 11.8536 8.14645C12.0488 8.34171 12.0488 8.65829 11.8536 8.85355L8.70711 12Z" fill="#1C1917"></path>
          </svg>
        </button>
        <button class="btn btn-light d-flex align-items-center justify-content-center p-0" style="width: 64px; height: 64px;">
          <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.2929 13H7.5C7.22386 13 7 12.7761 7 12.5C7 12.2239 7.22386 12 7.5 12H17.2929L14.1464 8.85355C13.9512 8.65829 13.9512 8.34171 14.1464 8.14645C14.3417 7.95118 14.6583 7.95118 14.8536 8.14645L18.8536 12.1464C19.0488 12.3417 19.0488 12.6583 18.8536 12.8536L14.8536 16.8536C14.6583 17.0488 14.3417 17.0488 14.1464 16.8536C13.9512 16.6583 13.9512 16.3417 14.1464 16.1464L17.2929 13Z" fill="#1C1917"></path>
          </svg>
        </button>
      </div>
      <div class="col-12 col-lg-8 mx-auto text-center"><span class="badge bg-success text-white">New Feature</span>
        <h2 class="mt-6 mb-4 text-white">Expand your brand with this excellent extension tool</h2>

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 #3096

Bootstrap

Cronos

<section class="py-20 bg-secondary">
  <div class="container">
    <div class="row bg-white">
      <div class="col-12 col-md-6 col-lg-4 py-20 shadow-lg">
        <div class="mw-xs px-md-5 mx-auto text-center"><span>
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14 40H40" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8 40V34L34 8L40 14L14 40H8Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M34 20L28 14" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
          <h6 class="mt-8 mb-4 fw-normal">Change of access</h6>
          <p class="lead lh-lg text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4 py-20 shadow-lg">
        <div class="mw-xs px-md-5 mx-auto text-center"><span>
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M24 44C24 44 40 36 40 24V10L24 4L8 10V24C8 36 24 44 24 44Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M16 23L22 29L34 17" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
          <h6 class="mt-6 mb-4 fw-normal">Security in savings</h6>
          <p class="lead lh-lg text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
        </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 #3097

Bootstrap

Cronos

<section class="py-20 bg-secondary">
  <div class="container">
    <div class="row bg-white">
      <div class="col-12 col-md-6 col-lg-4 py-20 border-bottom border-end">
        <div class="mw-xs px-md-5 mx-auto text-center"><span>
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14 40H40" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8 40V34L34 8L40 14L14 40H8Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M34 20L28 14" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
          <h6 class="mt-8 mb-4 fw-normal">Change of access</h6>
          <p class="lead lh-lg text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4 py-20 border-bottom border-end">
        <div class="mw-xs px-md-5 mx-auto text-center"><span>
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M24 44C24 44 40 36 40 24V10L24 4L8 10V24C8 36 24 44 24 44Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M16 23L22 29L34 17" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
          <h6 class="mt-6 mb-4 fw-normal">Security in savings</h6>
          <p class="lead lh-lg text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
        </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 #3098

Bootstrap

Cronos

<section class="py-20 bg-light-light">
  <div class="container">
    <div class="row align-items-center">
      <div class="d-none d-lg-block col-lg-auto">
        <button class="btn bg-white d-flex align-items-center justify-content-center p-0" style="width: 64px; height: 64px;">
          <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.70711 12H18.5C18.7761 12 19 12.2239 19 12.5C19 12.7761 18.7761 13 18.5 13H8.70711L11.8536 16.1464C12.0488 16.3417 12.0488 16.6583 11.8536 16.8536C11.6583 17.0488 11.3417 17.0488 11.1464 16.8536L7.14645 12.8536C6.95118 12.6583 6.95118 12.3417 7.14645 12.1464L11.1464 8.14645C11.3417 7.95118 11.6583 7.95118 11.8536 8.14645C12.0488 8.34171 12.0488 8.65829 11.8536 8.85355L8.70711 12Z" fill="#1C1917"></path>
          </svg>
        </button>
      </div>
      <div class="d-flex justify-content-center mb-10 d-lg-none">
        <button class="btn bg-white d-flex align-items-center justify-content-center p-0 me-4" style="width: 64px; height: 64px;">
          <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.70711 12H18.5C18.7761 12 19 12.2239 19 12.5C19 12.7761 18.7761 13 18.5 13H8.70711L11.8536 16.1464C12.0488 16.3417 12.0488 16.6583 11.8536 16.8536C11.6583 17.0488 11.3417 17.0488 11.1464 16.8536L7.14645 12.8536C6.95118 12.6583 6.95118 12.3417 7.14645 12.1464L11.1464 8.14645C11.3417 7.95118 11.6583 7.95118 11.8536 8.14645C12.0488 8.34171 12.0488 8.65829 11.8536 8.85355L8.70711 12Z" fill="#1C1917"></path>
          </svg>
        </button>
        <button class="btn bg-white d-flex align-items-center justify-content-center p-0" style="width: 64px; height: 64px;">
          <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.2929 13H7.5C7.22386 13 7 12.7761 7 12.5C7 12.2239 7.22386 12 7.5 12H17.2929L14.1464 8.85355C13.9512 8.65829 13.9512 8.34171 14.1464 8.14645C14.3417 7.95118 14.6583 7.95118 14.8536 8.14645L18.8536 12.1464C19.0488 12.3417 19.0488 12.6583 18.8536 12.8536L14.8536 16.8536C14.6583 17.0488 14.3417 17.0488 14.1464 16.8536C13.9512 16.6583 13.9512 16.3417 14.1464 16.1464L17.2929 13Z" fill="#1C1917"></path>
          </svg>
        </button>
      </div>
      <div class="col-12 col-lg-8 mx-auto text-center"><span class="badge bg-secondary-light">New Feature</span>
        <h2 class="mt-6 mb-4">Expand your brand with this excellent extension tool</h2>

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 #3099

Bootstrap

Cronos

<section class="py-20 position-relative"><img class="d-none d-lg-block position-absolute top-0 start-0 img-fluid" src="cronos-assets/elements/left-top.svg" alt=""/><img class="d-none d-lg-block position-absolute bottom-0 start-0" src="cronos-assets/elements/left-bottom.svg" alt=""/>
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-6 mb-10 mb-lg-0">
        <div class="mw-lg">
          <h2 class="mb-6">Trusted by brands all over the world</h2>
          <p class="mw-md lead lh-lg text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div style="margin-left: 149px;">
          <div class="d-flex justify-content-center align-items-center bg-light-light" style="width: 149px; height: 149px;"><img class="img-fluid" src="cronos-assets/logos/brands/stripe-color.svg" alt=""/></div>
        </div>
        <div class="d-flex">
          <div>
            <div class="d-flex justify-content-center align-items-center" style="width: 149px; height: 149px;"><img class="d-block mx-auto img-fluid" style="height: 24px;" src="cronos-assets/logos/brands/slack-color.svg" alt=""/></div>
            <div class="d-flex justify-content-center align-items-center bg-light-light" style="width: 149px; height: 149px;"><img class="d-block mx-auto img-fluid" style="height: 23px;" src="cronos-assets/logos/brands/netflix-color.svg" alt=""/></div>
          </div>
          <div class="w-100 d-flex justify-content-center align-items-center bg-light"><img class="d-block mx-auto img-fluid" style="height: 32px;" src="cronos-assets/logos/brands/spotify-color.svg" alt=""/></div>
        </div>
        <div class="d-flex flex-wrap justify-content-end">
          <div class="d-flex justify-content-center align-items-center bg-light-light" style="width: 149px; height: 149px;"><img class="d-block mx-auto img-fluid" style="height: 24px;" src="cronos-assets/logos/brands/dropbox-color.svg" alt=""/></div>
          <div class="d-flex justify-content-center align-items-center" style="width: 149px; height: 149px;"><img class="d-block mx-auto img-fluid" style="height: 23px;" src="cronos-assets/logos/brands/amazon-color.svg" 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 #3100

Bootstrap

Cronos

<section class="py-20">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-6 mb-10 mb-lg-0">
        <div class="mw-lg">
          <h2 class="mb-6">Trusted by brands all over the world</h2>
          <p class="mw-md lead lh-lg text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="row">
          <div class="col-6 col-md-4 mb-4">
            <div class="py-14 px-8 bg-light-light"><img class="d-block mx-auto img-fluid" style="height: 32px;" src="cronos-assets/logos/brands/amazon-color.svg" alt=""/></div>
          </div>
          <div class="col-6 col-md-4 mb-4">
            <div class="py-14 px-8 bg-light-light"><img class="d-block mx-auto img-fluid" style="height: 32px;" src="cronos-assets/logos/brands/netflix-color.svg" alt=""/></div>
          </div>
          <div class="col-6 col-md-4 mb-4">
            <div class="py-14 px-8 bg-light-light"><img class="d-block mx-auto img-fluid" style="height: 32px;" src="cronos-assets/logos/brands/stripe-color.svg" alt=""/></div>
          </div>
          <div class="col-6 col-md-4 mb-4">
            <div class="py-14 px-8 bg-light-light"><img class="d-block mx-auto img-fluid" style="height: 32px;" src="cronos-assets/logos/brands/slack-color.svg" alt=""/></div>
          </div>
          <div class="col-6 col-md-4">

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 #3081

Get the code for 13,400+ components

Bootstrap Component #3082

Get the code for 13,400+ components

Bootstrap Component #3083

Get the code for 13,400+ components

Bootstrap Component #3084

Get the code for 13,400+ components

Bootstrap Component #3085

Get the code for 13,400+ components

Bootstrap Component #3086

Get the code for 13,400+ components

Bootstrap Component #3087

Get the code for 13,400+ components

Bootstrap Component #3088

Get the code for 13,400+ components

Bootstrap Component #3089

Get the code for 13,400+ components

Bootstrap Component #3090

Get the code for 13,400+ components

Bootstrap Component #3091

Get the code for 13,400+ components

Bootstrap Component #3092

Get the code for 13,400+ components

Bootstrap Component #3093

Get the code for 13,400+ components

Bootstrap Component #3094

Get the code for 13,400+ components

Bootstrap Component #3095

Get the code for 13,400+ components

Bootstrap Component #3096

Get the code for 13,400+ components

Bootstrap Component #3097

Get the code for 13,400+ components

Bootstrap Component #3098

Get the code for 13,400+ components

Bootstrap Component #3099

Get the code for 13,400+ components

Bootstrap Component #3100

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