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

Bootstrap

Vista

<section class="position-relative pt-8 pb-12 pb-lg-24 pb-xl-32 bg-danger-dark">
  <div class="container"><a class="btn btn-link p-0 mb-24 mb-lg-52 fs-9 fw-semibold text-white text-decoration-none" href="#">
      <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="white" style="stroke:white;stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg><span class="ms-2">Back to Home</span></a>
    <div class="mw-sm mw-lg-4xl mw-xl-5xl mx-auto">
      <div class="row">
        <div class="col-lg-6">
          <div class="mw-sm"><img class="img-fluid d-block mb-10" src="vista-assets/images/sign-up/logo-pink.png" alt="">
            <p class="mb-10">“Now more than ever, cash is king. Vista meets this need by providing access to a new, non-dilutive financing option with the ability to attract and retain customers through flexible payment options.”</p>
            <div class="mb-10"><span class="d-block fw-semibold">James Dean</span><span class="d-block fs-9 text-white text-opacity-50">Founder, Lume</span></div>
            <div>
              <button class="btn p-0">
                <svg width="20" height="2" viewBox="0 0 20 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="20" height="2" rx="1" fill="white" style="fill:white;fill-opacity:1;"></rect>
                </svg>
              </button>
              <button class="btn p-0">
                <svg width="8" height="2" viewBox="0 0 8 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect opacity="0.3" width="8" height="2" rx="1" fill="white" style="fill:white;fill-opacity:1;"></rect>
                </svg>
              </button>
              <button class="btn p-0">
                <svg width="8" height="2" viewBox="0 0 8 2" fill="none" xmlns="http://www.w3.org/2000/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 #3322

Bootstrap

Vista

<section class="position-relative py-12 py-md-24 py-lg-40 py-xl-52 bg-danger-dark">
  <div class="container">
    <div class="mw-sm mw-md-5xl mx-auto">
      <div class="d-flex flex-column flex-md-row align-items-center"><img class="img-fluid d-block w-100 mw-xs pe-md-6 pe-lg-0 mb-14 mb-md-0" src="vista-assets/images/http-codes/http-code-pink2.png" alt="">
        <div class="ms-md-10 ms-lg-24">
          <h4 class="font-heading mb-4">Oops. Page not found.</h4>
          <p class="mw-lg fs-7 text-white text-opacity-50 mb-10">The page you are looking for was moved, removed, renamed or might have never existed!</p><a class="btn d-inline-flex align-items-center btn-danger border-2 border-white border-opacity-10" href="#"><span class="me-2">Back to home</span>
            <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 3L11 8L6 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></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 #3323

Bootstrap

Vista

<section class="position-relative py-12 py-sm-24 bg-danger-dark">
  <div class="container">
    <div class="mw-5xl mx-auto mw-lg-6xl">
      <div class="row align-items-center">
        <div class="col-lg-5 mb-12">
          <div class="mw-sm">
            <h6 class="font-heading mb-0">Powering financial insights for business owners.</h6>
          </div>
        </div>
        <div class="col-lg-7">
          <div class="row justify-content-center mb-n10">
            <div class="col-6 col-sm-3 mb-10"><img class="img-fluid d-block opacity-25" style="height: 32px;" src="vista-assets/images/logos/aurevo-logo.svg" alt=""></div>
            <div class="col-6 col-sm-3 mb-10"><img class="img-fluid d-block opacity-25" style="height: 32px;" src="vista-assets/images/logos/syra-logo-light.svg" alt=""></div>
            <div class="col-6 col-sm-3 mb-10"><img class="img-fluid d-block opacity-25" style="height: 32px;" src="vista-assets/images/logos/axiomatic-logo.svg" alt=""></div>
            <div class="col-6 col-sm-3 mb-10"><img class="img-fluid d-block opacity-25" style="height: 32px;" src="vista-assets/images/logos/lume-logo.svg" alt=""></div>
            <div class="col-6 col-sm-3 mb-10"><img class="img-fluid d-block opacity-25" style="height: 32px;" src="vista-assets/images/logos/acme-logo.svg" alt=""></div>
            <div class="col-6 col-sm-3 mb-10"><img class="img-fluid d-block opacity-25" style="height: 32px;" src="vista-assets/images/logos/lume-logo.svg" alt=""></div>
            <div class="col-6 col-sm-3 mb-10"><img class="img-fluid d-block opacity-25" style="height: 32px;" src="vista-assets/images/logos/cronix-logo.svg" alt=""></div>
            <div class="col-6 col-sm-3 mb-10"><img class="img-fluid d-block opacity-25" style="height: 32px;" src="vista-assets/images/logos/syra-logo-light.svg" alt=""></div>
          </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 #3324

Bootstrap

Vista

<section class="position-relative py-24 bg-danger-dark">
  <div class="container">
    <div class="mw-md mw-md-2xl mx-auto mw-lg-none">
      <div class="mb-12">
        <nav class="mb-12" aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a class="text-white text-opacity-50" href="#">Blog</a></li>
            <li class="breadcrumb-item text-white active" aria-current="page">Effective email marketing on a budget</li>
          </ol>
        </nav>
        <h3 class="mw-3xl font-heading mb-4">Mastering Cash Basis Accounting: A Step-by-Step Guide</h3>
        <div class="d-flex mb-12 align-items-center"><span class="fs-9 fw-medium">17 Jul 2024</span><span class="badge ms-6 px-2 lh-sm rounded-2 text-white bg-white bg-opacity-10 border border-white border-opacity-10">Accounting</span></div><img class="img-fluid d-block w-100" src="vista-assets/images/blog-content/placeholder-pink.png" alt="">
      </div>
      <div class="mw-3xl mx-auto">
        <p class="fs-6 text-white text-opacity-50 mb-12">Cash basis accounting simplifies tracking by only recording transactions when cash enters or exits your business, regardless of when they're earned or billed. It's commonly used by individuals and small businesses with straightforward cash flows. While it offers simplicity and clarity regarding available cash, it may not provide a complete picture of business health or growth opportunities.</p>
        <h4 class="font-heading mb-6">What is cash basis accounting?</h4>
        <p class="fs-6 text-white text-opacity-50 mb-12">Cash basis accounting is when you only record transactions when the money enters or leaves your business, even if they were earned or billed earlier.</p>
        <h4 class="font-heading mb-6">How does cash accounting work?</h4>
        <p class="fs-6 text-white text-opacity-50 mb-6">Cash basis accounting is a simple way to track the cash that’s flowing in and out of your business.</p>
        <p class="fs-6 text-white text-opacity-50 mb-6">Here are a few examples of what it can look like:</p>
        <ul class="mb-12">
          <li class="mb-6 text-white text-opacity-50">With cash basis accounting, you record payments for products as they're received, not beforehand, even with flexible payment options like installment plans for your online shop.</li>
          <li class="mb-6 text-white text-opacity-50">If customers pay with credit cards, revenue isn't recorded immediately but when the payment is received from the credit card company.</li>
          <li class="mb-6 text-white text-opacity-50">You’re a graphic designer who spends a week in April creating a brochure for a local gallery. You submit an invoice of net 30, which means that the gallery is paying you in May. With cash basis accounting, you’d recognize that income in May when you receive the payment rather than in April, when you did the work.</li>

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

Bootstrap

Vista

<section class="position-relative pb-12 pb-lg-24 bg-danger-dark overflow-hidden">
  <div class="pt-16 pt-md-24 pt-lg-32 pb-24 pb-md-32 pb-lg-40 pb-xl-52 mb-24 bg-gradient-danger-bottom">
    <div class="container">
      <div class="mw-3xl mx-auto text-center">
        <h1 class="font-heading text-gradient text-shadow mb-0">We’re a passionate team building the future of bookkeeping</h1>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="mb-14 mb-md-24 mb-lg-32"><span class="d-block text-center fs-6 fw-medium mb-10">Our investors</span>
      <div class="row mb-n10">
        <div class="col-6 col-md-3 mb-10"><img class="d-block mx-auto img-fluid" src="vista-assets/images/logos/aurevo-logo.svg" alt=""></div>
        <div class="col-6 col-md-3 mb-10"><img class="d-block mx-auto img-fluid" src="vista-assets/images/logos/syra-logo-light.svg" alt=""></div>
        <div class="col-6 col-md-3 mb-10"><img class="d-block mx-auto img-fluid" src="vista-assets/images/logos/axiomatic-logo.svg" alt=""></div>
        <div class="col-6 col-md-3 mb-10"><img class="d-block mx-auto img-fluid" src="vista-assets/images/logos/lume-logo.svg" alt=""></div>
        <div class="col-6 col-md-3 mb-10"><img class="d-block mx-auto img-fluid" src="vista-assets/images/logos/acme-logo.svg" alt=""></div>
        <div class="col-6 col-md-3 mb-10"><img class="d-block mx-auto img-fluid" src="vista-assets/images/logos/lume-logo.svg" alt=""></div>
        <div class="col-6 col-md-3 mb-10"><img class="d-block mx-auto img-fluid" src="vista-assets/images/logos/cronix-logo.svg" alt=""></div>
        <div class="col-6 col-md-3 mb-10"><img class="d-block mx-auto img-fluid" src="vista-assets/images/logos/syra-logo-light.svg" alt=""></div>
      </div>
    </div>
    <div class="row mb-14 mb-md-24 mb-lg-32">
      <div class="col-lg-6 mb-6 mb-lg-0">
        <div class="mw-xl mx-auto mx-lg-0">

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

Bootstrap

Vista

<section class="position-relative py-12 py-lg-24 pb-xl-32 bg-danger-dark">
  <div class="container">
    <div>
      <div class="mw-md mx-auto mw-lg-none text-center mb-20">
        <h3 class="font-heading mb-4">Meet our team</h3>
        <p class="text-white text-opacity-50">Meet our diverse and world-class problem solvers. We come from all corners of the globe.</p>
      </div>
      <div class="mw-sm mw-md-xl mx-auto mw-lg-none">
        <div class="row mb-n16">
          <div class="col-md-6 col-lg-3 mb-16">
            <div>
              <div class="position-relative d-flex mb-4 align-items-end pt-9 bg-danger bg-opacity-10 rounded-2 overflow-hidden" style="height: 312px;">
                <div class="position-absolute top-50 start-50 mt-n16 translate-middle-x d-inline-block h-100 w-100 bg-gradient-danger-top rounded-pill" style="filter: blur(65px);"></div>
                <div class="position-absolute top-50 start-50 translate-middle">
                  <svg width="225" height="226" viewBox="0 0 225 226" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_315_5549)">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M166.81 16.6607H43.6246C42.7569 16.6607 41.916 16.7819 41.0976 16.9956C40.933 17.0394 40.7767 17.1073 40.6197 17.1755C40.5043 17.2256 40.3885 17.2759 40.2689 17.3168C40.1722 17.3533 40.0749 17.3889 39.9776 17.4245C39.5707 17.5734 39.1625 17.7228 38.7828 17.94C38.6036 18.0433 38.4435 18.1674 38.2841 18.2909C38.1762 18.3745 38.0686 18.4579 37.9556 18.5344C37.8904 18.5805 37.825 18.6263 37.7594 18.6721C37.4191 18.9101 37.0773 19.1491 36.777 19.4391C36.5955 19.6176 36.4406 19.8194 36.2844 20.0227C36.2231 20.1025 36.1616 20.1826 36.0983 20.2616C36.0158 20.3583 35.929 20.4522 35.8419 20.5463C35.6493 20.7546 35.4557 20.9639 35.3066 21.2073L1.61973 73.8792C1.54947 73.9943 1.49988 74.1181 1.44983 74.243C1.4106 74.3409 1.3711 74.4395 1.32114 74.5352C1.27919 74.6102 1.22523 74.6805 1.17069 74.7516C1.09969 74.8441 1.02774 74.9378 0.980094 75.0448C0.935378 75.1449 0.912243 75.2476 0.889374 75.349C0.867063 75.448 0.845005 75.5458 0.803407 75.6392C0.624329 76.1168 0.477894 76.6059 0.365114 77.1034C0.27888 77.4916 0.213046 77.8841 0.167883 78.2792C0.125747 78.7723 0.119567 79.2679 0.149392 79.7619L0.153244 79.8126C0.182672 80.2006 0.211632 80.5823 0.272662 80.9603C0.357908 81.4282 0.503094 81.868 0.651612 82.3179L0.66781 82.367C0.691326 82.4338 0.714434 82.5007 0.737501 82.5674C0.851472 82.897 0.964425 83.2238 1.12048 83.5353C1.1518 83.6011 1.1741 83.6716 1.19655 83.7426C1.21828 83.8113 1.24014 83.8805 1.27046 83.9462C1.38575 84.1607 1.53691 84.3449 1.68816 84.5292C1.76871 84.6273 1.84928 84.7255 1.92448 84.8283C1.99278 84.9299 2.05047 85.0336 2.10746 85.136C2.19448 85.2924 2.2799 85.446 2.39907 85.585L104.217 205.846C105.973 207.919 108.605 209.391 111.229 209.316C111.248 209.316 111.268 209.322 111.285 209.327C111.297 209.33 111.308 209.333 111.317 209.333C111.463 209.341 111.603 209.341 111.751 209.341H111.772C112.652 209.341 113.515 209.177 114.346 208.955C114.592 208.877 114.815 208.799 115.062 208.704C115.68 208.485 116.275 208.204 116.838 207.865C116.884 207.838 116.931 207.811 116.978 207.784C117.124 207.699 117.274 207.613 117.414 207.519C118.084 207.054 118.713 206.52 119.256 205.875L222.12 85.6158C222.196 85.5252 222.253 85.4234 222.31 85.3217C222.351 85.2482 222.392 85.1748 222.441 85.1056C222.502 85.028 222.569 84.9553 222.637 84.8824C222.75 84.7604 222.863 84.6377 222.951 84.4906C223.041 84.3486 223.104 84.1957 223.167 84.0415C223.208 83.9437 223.248 83.8454 223.296 83.749C223.469 83.4305 223.633 83.1093 223.761 82.7642C223.954 82.2629 224.086 81.7541 224.201 81.2445C224.215 81.179 224.23 81.1141 224.244 81.0496C224.305 80.7736 224.364 80.5046 224.39 80.2248C224.456 79.6571 224.431 79.1038 224.39 78.5408C224.381 78.4139 224.377 78.2902 224.374 78.1689C224.368 77.9719 224.363 77.7812 224.333 77.593C224.222 76.878 223.995 76.1782 223.719 75.5043C223.689 75.4334 223.674 75.3619 223.658 75.2901C223.642 75.2142 223.626 75.1379 223.592 75.0619C223.582 75.0519 223.574 75.0409 223.567 75.029C223.567 75.0214 223.565 75.0155 223.563 75.0104C223.559 75.0045 223.555 74.9996 223.551 74.9941L212.139 50.7628L139.32 137.545L99.4193 141.035L95.9285 101.134L166.81 16.6607Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                    </g>
                  </svg>
                </div><img class="position-relative img-fluid d-block mx-auto" src="vista-assets/images/team/team1.png" alt="">
              </div>
              <div class="position-relative">
                <div><span class="d-block fs-7 fw-semibold">David Dobryk</span><span class="fs-9 text-white text-opacity-50">Founder &amp; CEO</span></div>
                <div class="position-absolute end-0 top-0"><a class="btn me-3 p-0 border-0 bg-danger bg-opacity-10 rounded-pill" href="#" style="width: 28px; height: 28px;">

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

Bootstrap

Vista

<section class="position-relative py-12 py-lg-24 bg-danger-dark overflow-hidden">
  <div class="container">
    <div class="text-center mb-20">
      <h3 class="font-heading text-gradient mb-4">Flexible pricing plan</h3>
      <p class="text-white text-opacity-50 mb-10">Pricing that scales with your business immediately.</p>
      <div class="d-inline-flex p-1 mb-4 rounded-pill bg-white bg-opacity-10 border-white border-opacity-25">
        <button class="btn py-1 px-3 fs-10 rounded-pill">Monthly</button>
        <button class="btn py-1 px-3 fs-10 bg-white bg-opacity-10 border-white border-opacity-10 rounded-pill"><span>Yearly</span><span class="ms-1 bg-danger text-gradient">10% OFF</span></button>
      </div>
    </div>
    <div class="mw-lg mw-lg-5xl mx-auto">
      <div class="row mb-24">
        <div class="col-lg-6 mb-8 mb-lg-0">
          <div class="pt-8 px-8 pb-16">
            <h6 class="fs-5 text-center mb-6">Basic</h6>
            <div class="d-flex mb-8 align-items-end justify-content-center"><span class="fs-2 fw-semibold lh-1">$9</span><span class="ms-1 text-white text-opacity-50">/per month</span></div><a class="btn mb-8 d-flex py-2 w-100 align-items-center justify-content-center btn-danger-dark border border-white border-opacity-10" href="#" style="height: 40px;">Get started</a>
            <div class="pt-8 border-white border-opacity-10" style="border-top: 1px dashed;">
              <div class="row">
                <div class="col-lg-6 mb-4 mb-lg-0">
                  <div class="d-flex mb-4 align-items-center">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g opacity="0.3">
                        <path d="M17.9667 8.94997L16.8334 7.6333C16.6167 7.3833 16.4417 6.91663 16.4417 6.5833V5.16663C16.4417 4.2833 15.7167 3.5583 14.8334 3.5583H13.4167C13.0917 3.5583 12.6167 3.3833 12.3667 3.16663L11.0501 2.0333C10.4751 1.54163 9.5334 1.54163 8.95007 2.0333L7.64173 3.17497C7.39173 3.3833 6.91673 3.5583 6.59173 3.5583H5.15006C4.26673 3.5583 3.54173 4.2833 3.54173 5.16663V6.59163C3.54173 6.91663 3.36673 7.3833 3.1584 7.6333L2.0334 8.9583C1.55007 9.5333 1.55007 10.4666 2.0334 11.0416L3.1584 12.3666C3.36673 12.6166 3.54173 13.0833 3.54173 13.4083V14.8333C3.54173 15.7166 4.26673 16.4416 5.15006 16.4416H6.59173C6.91673 16.4416 7.39173 16.6166 7.64173 16.8333L8.9584 17.9666C9.5334 18.4583 10.4751 18.4583 11.0584 17.9666L12.3751 16.8333C12.6251 16.6166 13.0917 16.4416 13.4251 16.4416H14.8417C15.7251 16.4416 16.4501 15.7166 16.4501 14.8333V13.4166C16.4501 13.0916 16.6251 12.6166 16.8417 12.3666L17.9751 11.05C18.4584 10.475 18.4584 9.52497 17.9667 8.94997ZM13.4667 8.42497L9.44173 12.45C9.32507 12.5666 9.16673 12.6333 9.00007 12.6333C8.8334 12.6333 8.67507 12.5666 8.5584 12.45L6.54173 10.4333C6.30007 10.1916 6.30007 9.79163 6.54173 9.54997C6.7834 9.3083 7.1834 9.3083 7.42507 9.54997L9.00007 11.125L12.5834 7.54163C12.8251 7.29997 13.2251 7.29997 13.4667 7.54163C13.7084 7.7833 13.7084 8.1833 13.4667 8.42497Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                      </g>

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

Bootstrap

Vista

<section class="position-relative pb-12 pb-lg-24 bg-danger-dark">
  <div class="container">
    <div class="py-7 mb-16 mb-sm-24 border-bottom border-white border-opacity-10">
      <div class="row">
        <div class="col-sm-6 mb-8 mb-sm-0">
          <div class="d-flex align-items-center"><img class="img-fluid" style="height: 24px;" src="vista-assets/images/logos/vista-logo-small.svg" alt=""><span class="mx-8">
              <svg width="1" height="24" viewBox="0 0 1 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <line x1="0.5" y1="24" x2="0.5" stroke="white" style="stroke:white;stroke-opacity:1;"></line>
              </svg></span><span class="fw-semibold">Careers</span></div>
        </div>
        <div class="col-sm-6 text-sm-end"><a class="btn p-0 fs-9 border-0" href="#"><span class="me-2">View openings</span>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.5 3L10.5 8L5.5 13" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a></div>
      </div>
    </div>
    <div class="mb-24 bg-gradient-danger-bottom rounded-2" style="padding: 1px;">
      <div class="position-relative bg-danger-dark rounded-2"><img class="position-absolute top-0 start-0 w-100 h-100" src="vista-assets/images/careers/illustration-pink.svg" alt="">
        <div class="bg-danger bg-opacity-10 py-12 pt-md-20 pb-md-24 px-8 rounded-2 position-relative">
          <div class="mw-3xl mx-auto text-center mb-12">
            <h2 class="font-heading mb-4">Careers at Vista</h2>
            <p class="text-white text-opacity-50 mb-10">Using the power of generative AI, we help anyone tap into the collective genius across their universe of ideas and people. Because AI's true potential isn't just improving how we interact with machines.</p><a class="btn py-1 d-inline-flex align-items-center text-danger-dark btn-light border-2 border-secondary border-opacity-25" href="#">Join us</a>
          </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 #3329

Bootstrap

Vista

<section class="pb-24 pb-lg-32 bg-danger-dark">
  <nav class="navbar mb-12 mb-lg-40 navbar-expand-lg navbar-dark bg-transparent border-bottom border-white border-opacity-10">
    <div class="container"><a class="navbar-brand me-6" href="#"><img class="img-fluid" src="vista-assets/images/logos/vista-logo.svg" alt=""></a>
      <button class="d-lg-none navbar-burger p-1 border-0 bg-white bg-opacity-10 rounded-pill ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.19995 23.2H26.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M5.19995 16H26.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M5.19995 8.79999H26.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse position-absolute top-50 start-50 translate-middle" id="nav01">
        <ul class="navbar-nav bg-white p-1 bg-opacity-10 rounded-pill">
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">Home</a></li>
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">Features</a></li>
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">Pricing</a></li>
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">About</a></li>
          <li class="nav-item"><a class="nav-link bg-white bg-opacity-10 rounded-pill" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="d-none d-lg-block ms-auto"><a class="btn btn-sm pe-3 d-flex align-items-center btn-outline-light border-0" href="#"><span class="me-1">Sign in</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></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 #3330

Bootstrap

Vista

<section class="position-relative bg-danger-dark">
  <div class="container">
    <div class="mw-sm mx-auto mw-lg-none">
      <div class="row">
        <div class="col-lg-6 col-xl-7 py-16 py-lg-24">
          <div class="mw-xl">
            <div class="row">
              <div class="col-6"><span class="d-block mb-6 fw-semibold fs-6">Product</span>
                <ul class="list-unstyled">
                  <li class="mb-6"><a class="btn btn-link p-0 text-white text-opacity-50 fs-6" href="#">Features</a></li>
                  <li class="mb-6"><a class="btn btn-link p-0 text-white text-opacity-50 fs-6" href="#">How it works</a></li>
                  <li class="mb-6"><a class="btn btn-link p-0 text-white text-opacity-50 fs-6" href="#">Pricing</a></li>
                  <li><a class="btn btn-link p-0 text-white text-opacity-50 fs-6" href="#">FAQs</a></li>
                </ul>
              </div>
              <div class="col-6"><span class="d-block mb-6 fw-semibold fs-6">Company</span>
                <ul class="list-unstyled">
                  <li class="mb-6"><a class="btn btn-link p-0 text-white text-opacity-50 fs-6" href="#">About</a></li>
                  <li class="mb-6"><a class="btn btn-link p-0 text-white text-opacity-50 fs-6" href="#">Blog</a></li>
                  <li class="mb-6"><a class="btn btn-link p-0 text-white text-opacity-50 fs-6" href="#">Contact</a></li>
                  <li><a class="btn btn-link p-0 text-white text-opacity-50 fs-6" href="#">Privacy Policy</a></li>
                </ul>
              </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 #3331

Bootstrap

Vista

<section class="position-relative py-12 py-md-24 py-lg-40 pt-xl-52 pb-xl-64 bg-danger-dark overflow-hidden">
  <div class="container">
    <div class="position-relative d-flex align-items-center justify-content-center mw-2xl mx-auto" style="min-height: 592px;">
      <div class="position-absolute top-50 start-50 w-100 h-100 translate-middle bg-danger-light rounded-pill" style="max-width: 592px; max-height: 592px; filter: blur(25px);"></div>
      <div class="position-absolute top-50 start-50 w-100 h-100 translate-middle bg-gradient-danger-top rounded-pill" style="max-width: 592px; max-height: 592px;"></div>
      <div class="position-absolute top-50 start-50 w-100 h-100 translate-middle bg-danger-dark rounded-pill" style="max-width: 586px; max-height: 586px;"></div>
      <div class="position-relative text-center px-10 px-sm-0"><img class="d-block mx-auto img-fluid mb-12" src="vista-assets/images/http-codes/http-code-pink3.png" alt="">
        <h4 class="font-heading mb-10">Oops. Page not found.</h4><a class="btn d-inline-flex align-items-center btn-danger border-2 border-white border-opacity-10" href="#"><span class="me-2">Back to home</span>
          <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 3L11 8L6 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a>
      </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 #3332

Bootstrap

Vista

<section class="position-relative bg-danger-dark">
  <div class="position-absolute top-0 start-0 col-lg-7 col-xl-6 h-100 p-8 d-none d-lg-block"><img class="img-fluid d-block h-100 w-100 mw-4xl" src="vista-assets/images/sign-up/picture-pink3.png" alt=""></div>
  <div class="position-relative container">
    <div class="row">
      <div class="col-lg-5 col-xl-6 ms-lg-auto py-12 py-md-24 py-lg-52">
        <div class="mw-sm mw-xl-md mx-auto mx-lg-0 ms-xl-auto">
          <div class="mb-8">
            <h2 class="font-heading h4 mb-4">Login</h2>
            <p class="text-white text-opacity-50 mb-0">Welcome back to Vista</p>
          </div>
          <form action="">
            <div class="mb-8">
              <label class="form-label" for="">Email</label>
              <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="email" id="" aria-describedby="" placeholder="john@email.com">
            </div>
            <div class="mb-8">
              <div class="position-relative">
                <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="password" id="" aria-describedby="" placeholder="Enter password">
                <button class="position-absolute top-50 end-0 me-6 translate-middle-y btn p-0 border-0 text-secondary">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.7445 6.36839L13.7446 6.36857C14.0157 6.79424 14.1663 7.3838 14.1663 7.99912C14.1663 8.61458 14.0157 9.20179 13.7454 9.62345L13.7447 9.62455C13.0069 10.7821 12.1122 11.6786 11.1304 12.2878C10.1493 12.8899 9.08596 13.2066 7.99967 13.2066C5.83421 13.2066 3.72502 11.9415 2.25517 9.62537L2.25473 9.62468C1.98347 9.1988 1.83301 8.61081 1.83301 7.99662C1.83301 7.3825 1.98344 6.79456 2.25465 6.36869C2.99243 5.21114 3.88718 4.31462 4.86891 3.70547C5.85008 3.10332 6.91339 2.78662 7.99967 2.78662C10.1646 2.78662 12.2742 4.05784 13.7445 6.36839ZM4.80634 7.99995C4.80634 9.76196 6.22939 11.1933 7.99967 11.1933C9.76996 11.1933 11.193 9.76196 11.193 7.99995C11.193 6.23795 9.76996 4.80662 7.99967 4.80662C6.22939 4.80662 4.80634 6.23795 4.80634 7.99995Z" fill="currentColor" stroke="currentColor"></path>
                    <path d="M7.99961 6.09326C6.95294 6.09326 6.09961 6.94659 6.09961 7.99993C6.09961 9.04659 6.95294 9.89993 7.99961 9.89993C9.04628 9.89993 9.90628 9.04659 9.90628 7.99993C9.90628 6.95326 9.04628 6.09326 7.99961 6.09326Z" fill="currentColor"></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 #3333

Bootstrap

Vista

<section class="position-relative py-12 py-md-24 bg-danger-dark">
  <div class="container">
    <div class="mw-lg-5xl mx-auto bg-gradient-danger-bottom rounded-2" style="padding: 2px;">
      <div class="bg-danger-dark rounded-2">
        <div class="py-16 px-8 w-100 bg-danger-light bg-opacity-10 rounded-2">
          <div class="text-center">
            <h3 class="font-heading mb-4">Join our newsletter</h3>
            <p class="mw-xs mx-auto mw-md-none text-white text-opacity-50 mb-12">Get the latest updates delivered into your inbox.</p>
            <div class="position-relative mw-sm mx-auto mb-5" style="height: 48px;">
              <div class="bg-danger bg-opacity-75" style="height: 48px; filter: blur(25px);"></div>
              <div class="position-absolute w-100 top-0 start-0" style="height: 48px;">
                <input class="form-control bg-danger-dark bg-opacity-75 h-100" type="" placeholder="Email address">
                <div class="position-absolute top-0 end-0 h-100 p-1 d-flex align-items-center">
                  <button class="btn h-100 d-flex align-items-center py-2 px-4 text-white btn-danger btn-shadow-danger border-2 border-white border-opacity-10" type="submit">Subscribe</button>
                </div>
              </div>
            </div>
            <p class="fs-9 text-white text-opacity-50 mb-0">No spam. You can unsubscribe anytime.</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

Bootstrap Component #3334

Bootstrap

Vista

<section class="position-relative py-12 py-sm-24 bg-danger-dark">
  <div class="container">
    <div class="row justify-content-center mb-n10">
      <div class="col-sm-3 col-md-2 mb-10"><img class="img-fluid d-block mx-auto opacity-25" style="height: 32px;" src="vista-assets/images/logos/aurevo-logo.svg" alt=""></div>
      <div class="col-sm-3 col-md-2 mb-10"><img class="img-fluid d-block mx-auto opacity-25" style="height: 32px;" src="vista-assets/images/logos/syra-logo-light.svg" alt=""></div>
      <div class="col-sm-3 col-md-2 mb-10"><img class="img-fluid d-block mx-auto opacity-25" style="height: 32px;" src="vista-assets/images/logos/axiomatic-logo.svg" alt=""></div>
      <div class="col-sm-3 col-md-2 mb-10"><img class="img-fluid d-block mx-auto opacity-25" style="height: 32px;" src="vista-assets/images/logos/lume-logo.svg" alt=""></div>
      <div class="col-sm-3 col-md-2 mb-10"><img class="img-fluid d-block mx-auto opacity-25" style="height: 32px;" src="vista-assets/images/logos/acme-logo.svg" alt=""></div>
      <div class="col-sm-3 col-md-2 mb-10"><img class="img-fluid d-block mx-auto opacity-25" style="height: 32px;" src="vista-assets/images/logos/lume-logo.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 #3335

Bootstrap

Vista

<section class="position-relative bg-danger-dark position-relative">
  <div class="container position-relative">
    <div class="d-none d-sm-block position-absolute top-0 start-0 ms-5 h-100">
      <div class="h-100 border-white border-opacity-10" style="border-left: 2px dashed"></div>
    </div>
    <div class="d-none d-sm-block position-absolute top-0 end-0 me-5 h-100">
      <div class="h-100 border-white border-opacity-10" style="border-right: 2px dashed"></div>
    </div>
    <div class="mw-sm mw-sm-md mw-md-xl mw-lg-4xl mw-xl-5xl py-12 py-lg-24 mx-auto"><span class="mb-4 badge text-danger-light" style="letter-spacing: 1.44px;">HOW IT WORKS</span>
      <h3 class="font-heading mb-20">See how we simplifies your financial tasks</h3>
      <div class="row align-items-center">
        <div class="col-lg-5 mb-12 mb-lg-0">
          <div>
            <div class="mw-xs pe-8 mb-10">
              <div class="d-flex align-items-center mb-2">
                <div class="position-relative flex-shrink-0" style="width: 24px; height: 24px;">
                  <div class="position-absolute top-0 start-0 w-100 h-100 d-inline-flex align-items-center justify-content-center rounded-pill bg-gradient-danger-bottom opacity-75"></div>
                  <div class="position-absolute top-50 start-50 translate-middle rounded-pill bg-danger-dark bg-opacity-75" style="width: 23px; height: 23px;">
                    <div class="d-flex w-100 h-100 align-items-center justify-content-center"><span class="fs-10 fw-semibold lh-sm">1</span></div>
                  </div>
                </div><span class="ms-2 fs-7 fw-semibold">Input Transactions</span>
              </div>
              <p class="text-white text-opacity-50 mb-0">Record your financial transactions such as receipts, and other relevant documents.</p>
            </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 #3336

Bootstrap

Vista

<section class="position-relative bg-danger-dark">
  <div class="position-absolute top-0 start-0 col-lg-7 col-xl-6 h-100 p-8 d-none d-lg-block"><img class="img-fluid d-block h-100 w-100 mw-4xl" src="vista-assets/images/sign-up/picture-pink3.png" alt=""></div>
  <div class="position-relative container">
    <div class="row">
      <div class="col-lg-5 col-xl-6 ms-lg-auto py-12 py-md-24 py-lg-52">
        <div class="mw-sm mw-xl-md mx-auto mx-lg-0 ms-xl-auto">
          <div class="mb-8">
            <h2 class="font-heading h4 mb-4">Create account</h2>
            <p class="text-white text-opacity-50 mb-0">Enter your details below to register an account.</p>
          </div>
          <form action="">
            <div class="row">
              <div class="col-6 mb-6">
                <label class="form-label fs-9" for="">First name</label>
                <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="text" id="" aria-describedby="" placeholder="First name">
              </div>
              <div class="col-6 mb-6">
                <label class="form-label fs-9" for="">Last name</label>
                <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="text" id="" aria-describedby="" placeholder="Last name">
              </div>
              <div class="col-12 mb-6">
                <label class="form-label fs-9" for="">Email</label>
                <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="email" id="" aria-describedby="" placeholder="john@email.com">
              </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 #3337

Bootstrap

Vista

<section class="position-relative py-12 py-lg-24 bg-danger-dark">
  <div class="container">
    <div class="mw-md mw-lg-5xl mx-auto">
      <div class="text-center mb-20">
        <h3 class="font-heading mb-0">Our features</h3>
      </div>
      <div class="mb-8 border border-white border-opacity-10 rounded-2 overflow-hidden">
        <div class="row">
          <div class="col-lg-6 mb-14 mb-lg-0">
            <div class="mw-md pt-12 ps-12 pe-6 pt-lg-32"><span class="d-block mb-1 fs-3 fw-bold">Simple Accounting</span>
              <p class="mw-xs fs-9 text-white text-opacity-50 mb-0">Keep track of your financial transactions with ease and simplicity.</p>
            </div>
          </div>
          <div class="col-lg-6 p-0"><img class="img-fluid d-block w-100 h-100" src="vista-assets/images/features/picture-pink5.png" alt=""></div>
        </div>
      </div>
      <div class="row mb-8">
        <div class="col-lg-6 mb-8 mb-lg-0">
          <div class="border border-white border-opacity-10 rounded-2 overflow-hidden"><img class="img-fluid d-block w-100" style="height: 400px;" src="vista-assets/images/features/picture-pink6.png" alt="">
            <div class="mw-sm ms-6 px-6 pt-12 pb-8 pb-lg-20"><span class="d-block mb-1 fs-3 fw-bold">Detailed Analytics</span>
              <p class="fs-9 text-white text-opacity-50 mb-0">Get detailed insights about your financial health with our analytics feature.</p>
            </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 #3338

Bootstrap

Vista

<section class="position-relative pt-12 pt-lg-24 bg-danger-dark">
  <div class="container">
    <div class="mw-xl mx-auto text-center">
      <h3 class="font-heading mb-4">Ready to experience seamless accounting?</h3>
      <p class="fs-7 text-white text-opacity-50 mb-10">Say goodbye to hassles and embrace seamless financial management.</p><a class="btn d-inline-flex align-items-center text-danger-dark btn-light border-2 border-dark border-opacity-25" href="#"><span class="me-2">Get Started</span>
        <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.49984 10H15.9165M15.9165 10L10.9165 5M15.9165 10L10.9165 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a>
    </div>
  </div><img class="img-fluid d-block mx-auto px-4 mt-24" src="vista-assets/images/cta/vista-text.svg" alt="">
</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 #3339

Bootstrap

Vista

<section class="position-relative py-12 py-md-24 bg-danger-dark">
  <div class="container">
    <div class="position-relative mw-md mw-md-2xl mw-lg-7xl mx-auto py-12 py-lg-20 px-8 rounded-2 bg-danger bg-opacity-10 overflow-hidden"><img class="d-none d-md-block position-absolute top-50 translate-middle-y start-0 h-100" src="vista-assets/images/stats/mapbase.svg" alt=""><img class="d-md-none position-absolute top-0 start-0" src="vista-assets/images/stats/mapbase.svg" alt="">
      <div class="position-relative mw-xl mx-auto me-lg-0">
        <p class="d-flex flex-wrap align-items-center mw-xs mx-auto mw-md-none fs-6 fw-medium mb-16"><span class="d-inline-block">Founded in</span><span class="d-inline-block mb-1 mx-3 fs-2 fw-semibold">2024</span><span class="d-inline-block">but already making numbers</span></p>
        <div class="row">
          <div class="d-none d-md-block col-md-4">
            <div class="p-8 rounded-start text-center bg-light bg-opacity-25"><span class="d-block fs-3 fw-medium">$5M+</span><span class="d-block text-white text-opacity-50">Revenue saved</span></div>
          </div>
          <div class="d-none d-md-block col-md-4">
            <div class="p-8 text-center bg-white bg-opacity-10"><span class="d-block fs-3 fw-medium">214</span><span class="d-block text-white text-opacity-50">Partners</span></div>
          </div>
          <div class="d-none d-md-block col-md-4">
            <div class="p-8 rounded-end text-center bg-light-dark bg-opacity-10"><span class="d-block fs-3 fw-medium">37+</span><span class="d-block text-white text-opacity-50">Countries</span></div>
          </div>
          <div class="d-md-none col-12 mb-6">
            <div class="mw-xs mx-auto p-8 rounded-top text-center bg-light bg-opacity-25"><span class="d-block fs-3 fw-medium">$5M+</span><span class="d-block text-white text-opacity-50">Revenue saved</span></div>
          </div>
          <div class="d-md-none col-12 mb-6">
            <div class="mw-xs mx-auto p-8 text-center bg-white bg-opacity-10"><span class="d-block fs-3 fw-medium">214</span><span class="d-block text-white text-opacity-50">Partners</span></div>
          </div>
          <div class="d-md-none col-12">
            <div class="mw-xs mx-auto p-8 rounded-bottom text-center bg-light-dark bg-opacity-10"><span class="d-block fs-3 fw-medium">37+</span><span class="d-block text-white text-opacity-50">Countries</span></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 #3340

Bootstrap

Vista

<section class="position-relative py-12 py-lg-24 bg-danger-dark">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-xl-6 mb-16">
        <div class="mw-md mx-auto mx-lg-0 p-6 bg-danger bg-opacity-10 rounded-3">
          <div class="d-flex align-items-start"><img class="img-fluid" src="vista-assets/images/testimonials/avatar2.png" alt="">
            <div class="ms-6"><span class="d-block fw-medium">Hanna Stanton</span><span class="d-block mb-4 fs-9 text-secondary">Founder of AIME Inc.</span>
              <p class="fs-9 mb-0">We use Vista daily and we’re very happy that they are created this amazing bookkeeping software.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-6 mb-16 d-none d-xl-block">
        <div class="mw-md ms-xl-auto me-xl-20 p-6 bg-danger bg-opacity-10 rounded-3">
          <div class="d-flex align-items-start"><img class="img-fluid" src="vista-assets/images/testimonials/avatar2.png" alt="">
            <div class="ms-6"><span class="d-block fw-medium">Hanna Stanton</span><span class="d-block mb-4 fs-9 text-secondary">Founder of AIME Inc.</span>
              <p class="fs-9 mb-0">We use Vista daily and we’re very happy that they are created this amazing bookkeeping software.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-auto mb-16 mt-6">
        <div class="d-inline-block me-lg-0 ms-20 ms-lg-n20 p-8 bg-danger bg-opacity-10 rounded-3">
          <div class="d-flex align-items-start"><img class="img-fluid" src="vista-assets/images/testimonials/avatar2.png" alt="">

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

Get the code for 13,400+ components

Bootstrap Component #3322

Get the code for 13,400+ components

Bootstrap Component #3323

Get the code for 13,400+ components

Bootstrap Component #3324

Get the code for 13,400+ components

Bootstrap Component #3325

Get the code for 13,400+ components

Bootstrap Component #3326

Get the code for 13,400+ components

Bootstrap Component #3327

Get the code for 13,400+ components

Bootstrap Component #3328

Get the code for 13,400+ components

Bootstrap Component #3329

Get the code for 13,400+ components

Bootstrap Component #3330

Get the code for 13,400+ components

Bootstrap Component #3331

Get the code for 13,400+ components

Bootstrap Component #3332

Get the code for 13,400+ components

Bootstrap Component #3333

Get the code for 13,400+ components

Bootstrap Component #3334

Get the code for 13,400+ components

Bootstrap Component #3335

Get the code for 13,400+ components

Bootstrap Component #3336

Get the code for 13,400+ components

Bootstrap Component #3337

Get the code for 13,400+ components

Bootstrap Component #3338

Get the code for 13,400+ components

Bootstrap Component #3339

Get the code for 13,400+ components

Bootstrap Component #3340

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