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

Bootstrap

Vista

<section class="position-relative py-24 bg-danger-dark">
  <div class="container">
    <div class="mw-lg mx-auto mw-lg-5xl">
      <div class="text-center mb-8">
        <h2 class="font-heading mb-20">Blog</h2>
        <div class="d-flex mb-4 align-items-center justify-content-center gap-4"><span class="badge px-2 lh-sm rounded-2 text-white bg-white bg-opacity-10 border border-white border-opacity-10">Accounting</span><span class="d-block fs-9 fw-medium">17 Jul 2023</span></div>
        <h4 class="font-heading mb-4">Effective email marketing on a budget</h4>
        <p class="text-white text-opacity-50 mb-0">Read on to find out what the technique is, what it’s used for, and how you can apply it to your studies.</p>
      </div>
      <div class="mb-20"><img class="img-fluid d-block w-100" src="vista-assets/images/blog-content/placeholder-pink.png" alt=""></div>
      <h4 class="text-center font-heading mb-10">Browse by category</h4>
      <div class="border-bottom border-white border-opacity-10 mb-10">
        <div class="d-flex flex-wrap gap-6 gap-lg-10 justify-content-center"><a class="position-relative btn text-danger px-0 pt-0 pb-4 border-0" href="#"><span>Trending</span>
            <div class="position-absolute bottom-0 start-0 w-100 border-bottom border-2 border-danger"></div></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Accounting</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Entrepreneurship</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Payments</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Company</span></a></div>
      </div>
      <div class="row mb-n12">
        <div class="col-lg-4 mb-12"><a class="btn d-block p-0 text-start fw-normal border-0" href="#"><img class="d-block mb-6 img-fluid w-100" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt="">
            <div class="d-flex mb-3 align-items-center justify-content-between gap-4"><span class="badge px-2 lh-sm rounded-2 text-white bg-white bg-opacity-10 border border-white border-opacity-10">Accounting</span><span class="d-block fs-9 fw-medium">17 Jul 2023</span></div>
            <h6 class="font-heading fs-7 mb-3">Make Your Phone Your Best Study Tool</h6>
            <p class="text-white text-opacity-50 fs-9 pe-5 mb-6">How do we make our phone best study tool? Read on to find out more.</p></a></div>
        <div class="col-lg-4 mb-12"><a class="btn d-block p-0 text-start fw-normal border-0" href="#"><img class="d-block mb-6 img-fluid w-100" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt="">
            <div class="d-flex mb-3 align-items-center justify-content-between gap-4"><span class="badge px-2 lh-sm rounded-2 text-white bg-white bg-opacity-10 border border-white border-opacity-10">Accounting</span><span class="d-block fs-9 fw-medium">17 Jul 2023</span></div>
            <h6 class="font-heading fs-7 mb-3">Make Your Phone Your Best Study Tool</h6>
            <p class="text-white text-opacity-50 fs-9 pe-5 mb-6">How do we make our phone best study tool? Read on to find out more.</p></a></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 #3342

Bootstrap

Vista

<section class="py-12 py-lg-24 bg-danger-dark">
  <div class="container">
    <div class="mw-xl mx-auto mw-lg-none">
      <div class="text-center mb-20">
        <h4 class="font-heading mb-0">Frequently Asked Questions</h4>
      </div>
      <div class="mw-3xl mx-auto">
        <button class="btn d-block w-100 px-0 pt-6 pb-0 mb-6 text-start fw-normal border-0 rounded-0">
          <div class="d-flex align-items-center"><span class="me-2">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_139_2681)">
                  <path d="M10 4.16669V15.8334" stroke="#F53D6C" style="stroke:#F53D6C;stroke:color(display-p3 0.9608 0.2392 0.4235);stroke-opacity:1;" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4.1665 10H15.8332" stroke="#F53D6C" style="stroke:#F53D6C;stroke:color(display-p3 0.9608 0.2392 0.4235);stroke-opacity:1;" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </g>
              </svg></span>
            <h6 class="fs-7 fw-medium mb-0">What is Vista?</h6>
          </div>
        </button>
        <button class="btn d-block w-100 px-0 pt-6 pb-0 mb-6 text-start fw-normal border-0 border-top border-white border-opacity-10 rounded-0">
          <div class="d-flex align-items-center"><span class="me-2">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_139_2681)">
                  <path d="M10 4.16669V15.8334" stroke="#F53D6C" style="stroke:#F53D6C;stroke:color(display-p3 0.9608 0.2392 0.4235);stroke-opacity:1;" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4.1665 10H15.8332" stroke="#F53D6C" style="stroke:#F53D6C;stroke:color(display-p3 0.9608 0.2392 0.4235);stroke-opacity:1;" 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 #3343

Bootstrap

Vista

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary-dark">
    <div class="container">
      <div class="d-flex align-items-center"><a class="navbar-brand" href="#"><img class="img-fluid" style="height: 24px;" src="vista-assets/images/logos/vista-logo-small.svg" alt=""></a><span class="ms-4 me-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><a class="btn p-0" href="#">Careers</a></div>
      <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="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">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="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-100 mw-sm" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark" style="opacity: 75%;"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column pt-6 pb-10 px-8 bg-white overflow-auto">
      <div class="d-flex align-items-center"><a class="me-auto h4 mb-0 text-decoration-none" href="#"><img class="img-fluid" src="vista-assets/images/logos/vista-logo-dark.svg" alt=""></a><a class="navbar-close" href="#">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3344

Bootstrap

Vista

<section class="position-relative py-12 py-lg-24 bg-gradient-danger-top 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-4xl mx-auto">
      <div class="pt-10 px-10 pb-14 mb-8 bg-danger-dark rounded-2 border border-white border-opacity-10">
        <h6 class="fs-4 text-center mb-2">Basic</h6>
        <p class="text-center fs-9 text-white text-opacity-50 mb-10">Perfect for individuals &amp; small teams</p>
        <div class="py-6 mb-10 border-top border-bottom border-white border-opacity-10">
          <div class="row">
            <div class="col-lg-6 mb-8 mb-lg-0">
              <div class="d-flex align-items-end"><span class="fs-2 fw-semibold lh-1">$9</span><span class="ms-1 text-white text-opacity-50">/ per month - billed yearly</span></div>
            </div>
            <div class="col-lg-6 text-lg-end"><a class="btn d-inline-flex align-items-center btn-danger btn-shadow-danger border-2 border-white border-opacity-10" href="#">Get Started</a></div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4 mb-4 mb-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 #3345

Bootstrap

Vista

<section class="position-relative py-12 py-lg-24 bg-danger-dark">
  <div class="container">
    <div class="text-center mb-24">
      <h4 class="mb-6">We’re just getting started but...</h4>
      <p class="text-white text-opacity-50 mb-0">Vista founded in 2024, but we’ve already saved more than $50M of our customers revenue.</p>
    </div>
    <div class="mw-xs mw-md-5xl mx-auto">
      <div class="row">
        <div class="col-12 col-md-4 mb-12 mb-md-0 text-md-center">
          <div class="d-inline-flex mx-auto text-start align-items-center">
            <div class="d-flex align-items-center justify-content-center border border-danger rounded-pill" style="width: 72px; height: 72px;">
              <div class="d-flex align-items-center justify-content-center bg-danger-light bg-opacity-10 border border-white border-opacity-10 rounded-pill" style="width: 52px; height: 52px;">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M15.9198 2.94667L12.7064 10.4267H9.49311C8.95977 10.4267 8.43977 10.4667 7.93311 10.5733L9.26644 7.37333L9.31977 7.25333L9.39977 7.04C9.43977 6.94667 9.46644 6.86667 9.50644 6.8C11.0531 3.21333 12.7864 2.09333 15.9198 2.94667Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                  <path d="M24.9735 10.7867L24.9468 10.7733C24.1468 10.5467 23.3335 10.4267 22.5068 10.4267H14.1602L17.1602 3.45333L17.2002 3.36C17.3868 3.42667 17.5868 3.52 17.7868 3.58667L20.7335 4.82667C22.3735 5.50667 23.5202 6.21333 24.2268 7.06667C24.3468 7.22667 24.4535 7.37333 24.5602 7.54667C24.6802 7.73333 24.7735 7.92 24.8268 8.12C24.8802 8.24 24.9202 8.34667 24.9468 8.46667C25.1468 9.14667 25.1602 9.92 24.9735 10.7867Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                  <path d="M16.6934 23.5467H17.0267C17.4267 23.5467 17.76 23.1867 17.76 22.7467C17.76 22.1867 17.6 22.1067 17.2534 21.9733L16.6934 21.7733V23.5467Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                  <path d="M24.3868 12.6933C23.7868 12.52 23.1601 12.4267 22.5068 12.4267H9.49348C8.58682 12.4267 7.73348 12.6 6.93348 12.9467C4.61348 13.9467 2.98682 16.2533 2.98682 18.9333V21.5333C2.98682 21.8533 3.01348 22.16 3.05348 22.48C3.34682 26.72 5.61348 28.9867 9.85348 29.2667C10.1601 29.3067 10.4668 29.3333 10.8002 29.3333H21.2001C26.1335 29.3333 28.7335 26.9867 28.9868 22.32C29.0002 22.0667 29.0135 21.8 29.0135 21.5333V18.9333C29.0135 15.9867 27.0535 13.5067 24.3868 12.6933ZM17.7068 20.6667C18.3202 20.88 19.1468 21.3333 19.1468 22.7467C19.1468 23.96 18.2002 24.9333 17.0268 24.9333H16.6935V25.2267C16.6935 25.6133 16.3868 25.92 16.0002 25.92C15.6135 25.92 15.3068 25.6133 15.3068 25.2267V24.9333H15.1868C13.9068 24.9333 12.8535 23.8533 12.8535 22.52C12.8535 22.1333 13.1602 21.8267 13.5468 21.8267C13.9335 21.8267 14.2402 22.1333 14.2402 22.52C14.2402 23.08 14.6668 23.5467 15.1868 23.5467H15.3068V21.2933L14.2935 20.9333C13.6802 20.72 12.8535 20.2667 12.8535 18.8533C12.8535 17.64 13.8001 16.6667 14.9735 16.6667H15.3068V16.3733C15.3068 15.9867 15.6135 15.68 16.0002 15.68C16.3868 15.68 16.6935 15.9867 16.6935 16.3733V16.6667H16.8135C18.0935 16.6667 19.1468 17.7467 19.1468 19.08C19.1468 19.4667 18.8402 19.7733 18.4535 19.7733C18.0668 19.7733 17.7601 19.4667 17.7601 19.08C17.7601 18.52 17.3335 18.0533 16.8135 18.0533H16.6935V20.3067L17.7068 20.6667Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                  <path d="M14.2402 18.8533C14.2402 19.4133 14.4002 19.4933 14.7469 19.6267L15.3069 19.8267V18.0533H14.9736C14.5602 18.0533 14.2402 18.4133 14.2402 18.8533Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                </svg>
              </div>
            </div>
            <div class="ms-6"><span class="d-block fs-3 fw-semibold">$55,199.00</span><span class="text-white text-opacity-50">Revenue saved</span></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 #3346

Bootstrap

Vista

<section class="position-relative pb-12 pb-lg-24 bg-danger-dark overflow-hidden">
  <div class="position-relative pb-24 mb-24 bg-gradient-danger-bottom"><img class="position-absolute bottom-0 start-50 translate-middle-x" src="vista-assets/images/careers/ellipse.svg" alt="">
    <div class="container position-relative">
      <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="text-center"><img class="d-block mb-6 mx-auto img-fluid" src="vista-assets/images/logos/vista-logo-small.svg" alt="">
        <h2 class="font-heading mb-20">Careers at Vista</h2><a class="btn d-inline-flex align-items-center text-danger-dark btn-light border-2 border-secondary border-opacity-25" href="#">View Openings</a>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="mw-5xl mx-auto">

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

Bootstrap

Vista

<section class="position-relative py-12 py-lg-24 bg-danger-dark overflow-hidden">
  <div class="container">
    <div class="mw-4xl mx-auto mb-16 mb-md-24 text-center">
      <h1 class="font-heading mb-0">Our mission is to make bookkeeping simple</h1>
    </div><img class="d-block w-100 mb-12 mb-md-24 mb-lg-32 img-fluid" src="vista-assets/images/about/picture1.png" alt="">
    <div class="row mb-16 mb-md-24 mb-lg-32">
      <div class="col-lg-4 mb-12 mb-lg-0">
        <h3 class="fw-semibold mb-0">Our Story</h3>
      </div>
      <div class="col-lg-8">
        <div class="mw-xl ms-lg-auto">
          <p class="fs-6 mb-8">Vista emerged on the scene in 2024, a visionary solution born from the collective expertise of its founders. United by a shared passion for redefining the bookkeeping landscape, they embarked on a journey to create a cutting-edge SaaS platform.</p>
          <p class="fs-6 mb-0">Vista is more than a software; it's the culmination of years of industry insight and dedication to revolutionize the way businesses manage their financial records. Built on the pillars of efficiency, accuracy, and collaboration, Vista sets a new standard for bookkeeping solutions, empowering businesses to navigate their financial landscape with ease and confidence.</p>
        </div>
      </div>
    </div>
    <div class="row mb-14 mb-md-24 mb-lg-32">
      <div class="col-lg-6 mb-12 mb-lg-0">
        <div class="p-12 h-100 bg-danger rounded-2">
          <div class="d-flex mb-8 align-items-center"><img class="img-fluid" style="height: 48px;" src="vista-assets/images/logos/vista-logo-small.svg" alt=""><span class="ms-6 fs-7 fw-medium text-white text-opacity-75">OUR MISSION</span></div>
          <p class="fs-5 fw-semibold mb-0">We're transforming how businesses handle bookkeeping to revolutionize financial management.</p>
        </div>
      </div>
      <div class="col-lg-6">

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

Bootstrap

Vista

<section class="pb-12 pb-lg-24 bg-gradient-danger-top">
  <nav class="navbar mb-12 mb-lg-24 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 #3349

Bootstrap

Vista

<section class="position-relative py-12 py-md-32 py-lg-52 bg-danger-dark overflow-hidden"><img class="d-none d-md-block position-absolute top-0 start-50 translate-middle-x h-100" src="vista-assets/images/sign-up/lines.svg" alt="">
  <div class="container position-relative">
    <div class="mw-sm mx-auto">
      <div class="text-center mb-8"><img src="vista-assets/images/sign-up/logo-pink2.png" alt="">
        <h2 class="font-heading h4 mb-4">Welcome back</h2>
        <p class="d-flex align-items-center justify-content-center fs-9 mb-0"><span class="me-1 text-white text-opacity-50">Don’t have an account?</span><a class="btn fs-9 btn-link p-0 text-danger fw-medium" href="#">Sign up</a></p>
      </div>
      <form action="">
        <div class="mb-8">
          <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><a class="btn w-100 mb-8 d-inline-flex align-items-center justify-content-center btn-danger btn-shadow-danger border-3 border-white border-opacity-10" href="#">Log in</a>
        <div class="text-center"><span class="d-inline-block fs-10 text-secondary text-opacity-75">You acknowledge that you read, and agree to our</span>
          <div><a class="btn btn-link fs-10 p-0 text-secondary fw-semibold" href="#">Terms</a> <span class="fs-10 text-secondary text-opacity-75"> and</span> <a class="btn btn-link fs-10 p-0 text-secondary fw-semibold" href="#"> Privacy Policy.</a></div>
        </div>
      </form>
    </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 #3350

Bootstrap

Vista

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-success-dark">
    <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">
        <ul class="navbar-nav bg-white p-1 bg-opacity-10 rounded-pill">
          <li class="nav-item me-2"><a class="nav-link bg-white bg-opacity-10 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 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 #3351

Bootstrap

Vista

<section class="position-relative py-24 bg-danger-dark">
  <div class="container">
    <div class="mx-auto mw-lg-5xl">
      <h2 class="font-heading mb-16">Blog</h2>
      <div class="border-bottom border-white border-opacity-10 mb-20">
        <div class="row">
          <div class="col-lg-8 mb-8 mb-lg-0">
            <div class="d-flex flex-wrap gap-6 gap-lg-10"><a class="position-relative btn text-danger px-0 pt-0 pb-4 border-0" href="#"><span>Trending</span>
                <div class="position-absolute bottom-0 start-0 w-100 border-bottom border-2 border-danger"></div></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Accounting</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Entrepreneurship</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Payments</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Company</span></a></div>
          </div>
          <div class="col-lg-4">
            <div class="position-relative d-flex ms-auto align-items-center" style="max-width: 100px;">
              <button class="position-absolute top-50 start-0 ms-1 translate-middle-y btn p-0 border-0">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9.58335 17.5C13.9556 17.5 17.5 13.9556 17.5 9.58335C17.5 5.2111 13.9556 1.66669 9.58335 1.66669C5.2111 1.66669 1.66669 5.2111 1.66669 9.58335C1.66669 13.9556 5.2111 17.5 9.58335 17.5Z" stroke="#918889" style="stroke:#918889;stroke:color(display-p3 0.5668 0.5332 0.5374);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M18.3334 18.3334L16.6667 16.6667" stroke="#918889" style="stroke:#918889;stroke:color(display-p3 0.5668 0.5332 0.5374);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
              <input class="form-control ps-10 py-2 pe-0 bg-transparent border-0" type="search" placeholder="Search">
            </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 #3352

Bootstrap

Vista

<section class="position-relative py-12 py-lg-24 bg-danger-dark position-relative">
  <div class="container">
    <div class="mw-md mw-md-xl mx-auto mw-lg-none">
      <div class="mw-2xl mx-auto text-center mb-16"><span class="mb-4 badge text-danger-light" style="letter-spacing: 1.44px;">HOW IT WORKS</span>
        <h3 class="font-heading mb-0">See how we simplifies your financial tasks</h3>
      </div><img class="img-fluid d-block mx-auto" src="vista-assets/images/how-it-works/illustration-pink3.png" alt="">
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3353

Bootstrap

Vista

<section class="position-relative py-12 py-lg-24 pb-xl-32 bg-danger-dark">
  <div class="container">
    <div class="mw-sm mw-lg-5xl mx-auto">
      <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="row">
        <div class="col-lg-4 mb-12 mb-lg-0">
          <div class="d-flex flex-column h-100">
            <div class="mt-auto ps-lg-8 ps-xl-0 pb-lg-12">
              <h4 class="font-heading">Milena Graz</h4><span class="d-block mb-4 text-white text-opacity-50">Founder &amp; CMO</span>
              <div class="mb-12 mb-lg-24"><a class="btn me-3 p-0 border-0" href="#">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.1362 1.5H14.3416L9.52357 7.00667L15.1916 14.5H10.7529L7.2769 9.95533L3.29957 14.5H1.0929L6.24624 8.61L0.80957 1.5H5.35957L8.50157 5.654L12.1362 1.5ZM11.3622 13.18H12.5842L4.69624 2.75067H3.3849L11.3622 13.18Z" fill="currentColor"></path>
                  </svg></a><a class="btn p-0 border-0" href="#">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.1849 1.33334C13.5778 1.33334 13.9546 1.48943 14.2324 1.76726C14.5103 2.04509 14.6663 2.42191 14.6663 2.81483V13.1852C14.6663 13.5781 14.5103 13.9549 14.2324 14.2328C13.9546 14.5106 13.5778 14.6667 13.1849 14.6667H2.81449C2.42158 14.6667 2.04476 14.5106 1.76692 14.2328C1.48909 13.9549 1.33301 13.5781 1.33301 13.1852V2.81483C1.33301 2.42191 1.48909 2.04509 1.76692 1.76726C2.04476 1.48943 2.42158 1.33334 2.81449 1.33334H13.1849ZM12.8145 12.8148V8.8889C12.8145 8.24845 12.5601 7.63423 12.1072 7.18137C11.6543 6.7285 11.0401 6.47408 10.3997 6.47408C9.77005 6.47408 9.03671 6.85927 8.68116 7.43705V6.61483H6.61449V12.8148H8.68116V9.16297C8.68116 8.5926 9.14042 8.12594 9.71079 8.12594C9.98583 8.12594 10.2496 8.2352 10.4441 8.42968C10.6386 8.62416 10.7478 8.88793 10.7478 9.16297V12.8148H12.8145ZM4.20708 5.45186C4.53713 5.45186 4.85366 5.32075 5.08704 5.08737C5.32042 4.85399 5.45153 4.53747 5.45153 4.20742C5.45153 3.51853 4.89597 2.95557 4.20708 2.95557C3.87507 2.95557 3.55666 3.08746 3.32189 3.32222C3.08712 3.55699 2.95523 3.87541 2.95523 4.20742C2.95523 4.89631 3.51819 5.45186 4.20708 5.45186ZM5.23671 12.8148V6.61483H3.18486V12.8148H5.23671Z" fill="currentColor"></path>
                  </svg></a></div>
              <div class="d-flex align-items-center"><a class="btn me-6 p-0 d-flex align-items-center justify-content-center bg-secondary bg-opacity-10 border-white border-opacity-10 rounded-pill" href="#" style="width: 40px; height: 40px;">
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g opacity="0.4">
                      <path d="M13.125 16.25L6.875 10L13.125 3.75" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></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 #3354

Bootstrap

Vista

<section class="position-relative py-12 py-lg-24 bg-danger-dark overflow-hidden">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 mb-16">
        <div class="mw-md mw-lg-lg mx-auto mx-lg-0"><img class="d-block mb-12 img-fluid" src="vista-assets/images/logos/cronix-logo.svg" alt="">
          <p class="fs-4 fw-medium mb-12">“The tool just keeps getting better and meets our needs more and more.”</p>
          <div class="d-flex">
            <div class="me-12"><span class="d-block fw-bold">Hanna Stanton</span><span class="d-block text-secondary">Founder of Cronix</span></div>
            <div class="d-flex align-items-center gap-4">
              <button class="btn btn-danger-dark d-flex align-items-center justify-content-center p-0 border-2 border-white border-opacity-25 rounded-pill" style="width: 40px; height: 40px;">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g opacity="0.4">
                    <path d="M13.125 16.25L6.875 10L13.125 3.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </g>
                </svg>
              </button>
              <button class="btn btn-light d-flex align-items-center justify-content-center p-0 border-2 border-white border-opacity-25 rounded-pill" style="width: 40px; height: 40px;">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="#1F0A0F" style="stroke:#1F0A0F;stroke:color(display-p3 0.1206 0.0402 0.0593);stroke-opacity:1;" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </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 #3355

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-5xl">
      <div class="text-center mb-12">
        <div class="d-flex mb-4 align-items-center justify-content-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>
        <h2 class="font-heading mb-10">Mastering Cash Basis Accounting: A Step-by-Step Guide</h2>
        <div class="d-flex flex-column align-items-center justify-content-center"><span class="d-block mb-2 text-white text-opacity-50">Written by</span><img class="img-fluid d-block mb-4" src="vista-assets/images/blog-content/avatar.png" alt=""><span class="d-block text-white fw-semibold">Madelyn</span><span class="d-block fs-9 text-white text-opacity-50">Content Marketing</span></div>
      </div>
      <div class="mw-3xl mx-auto"><img class="img-fluid d-block mb-12 w-100" src="vista-assets/images/blog-content/placeholder-pink.png" alt="">
        <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>
          <li class="mb-6 text-white text-opacity-50">In cash basis accounting for your online clothing shop, sales are only recorded when payment is received via debit or cash, not credit.</li>
        </ul>
        <h4 class="font-heading mb-6">What is cash basis accounting?</h4>
        <div class="mw-2xl ps-6 border-start border-2 border-danger">
          <p class="fs-6 text-danger-light mb-0">Cash basis accounting is a simple way to track the cash that’s flowing in and out of your business.</p>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3356

Bootstrap

Vista

<section class="position-relative py-12 py-md-24 py-lg-40 bg-danger-dark overflow-hidden">
  <div class="container">
    <div class="mw-3xl mx-auto pt-4 pb-12 pb-sm-20 px-4 border border-white border-opacity-10 rounded-2"><img class="img-fluid d-block mx-auto mb-10" src="vista-assets/images/http-codes/http-code-pink4.png" alt="">
      <div class="mw-sm mw-sm-md mw-md-lg mx-auto text-center">
        <p class="fs-7 fw-medium 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 text-danger-dark btn-light border-2 border-dark border-opacity-25" 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 #3357

Bootstrap

Vista

<section class="py-12 pb-lg-16 pt-lg-24 bg-danger-dark">
  <div class="container">
    <div class="mw-5xl mx-auto">
      <div class="row mb-20">
        <div class="col-lg-4 mb-12 mb-lg-0"><img class="img-fluid" src="vista-assets/images/logos/vista-logo-small.svg" alt=""></div>
        <div class="col-6 col-md-3 col-lg-2 mb-6 mb-md-0">
          <div class="d-flex flex-column"><a class="btn btn-link p-0 text-white fs-6 mb-6" href="#">Features</a><a class="btn btn-link p-0 text-white fs-6" href="#">How it works</a></div>
        </div>
        <div class="col-6 col-md-3 col-lg-2 mb-6 mb-md-0">
          <div class="d-flex flex-column"><a class="btn btn-link p-0 text-white fs-6 mb-6" href="#">Pricing</a><a class="btn btn-link p-0 text-white fs-6" href="#">FAQs</a></div>
        </div>
        <div class="col-6 col-md-3 col-lg-2 mb-6 mb-md-0">
          <div class="d-flex flex-column"><a class="btn btn-link p-0 text-white fs-6 mb-6" href="#">About</a><a class="btn btn-link p-0 text-white fs-6" href="#">Blog</a></div>
        </div>
        <div class="col-6 col-md-3 col-lg-2">
          <div class="d-flex flex-column"><a class="btn btn-link p-0 text-white fs-6 mb-6" href="#">Contact Us</a><a class="btn btn-link p-0 text-white fs-6" href="#">Privacy Policy</a></div>
        </div>
      </div>
      <div class="pt-10 border-top border-white border-opacity-10">
        <div class="container">
          <div class="d-flex flex-wrap gap-6 align-items-center justify-content-between"><img class="img-fluid" src="vista-assets/images/logos/vista-logo.svg" alt=""><span class="d-inline-block text-white text-opacity-50">© Vista. All rights reserved.</span></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 #3358

Bootstrap

Vista

<section class="position-relative py-12 py-md-32 py-lg-52 bg-danger-dark overflow-hidden"><img class="d-none d-md-block position-absolute top-0 start-50 translate-middle-x h-100" src="vista-assets/images/sign-up/lines.svg" alt="">
  <div class="container position-relative">
    <div class="mw-sm mx-auto">
      <div class="text-center mb-8"><img src="vista-assets/images/sign-up/logo-pink2.png" alt="">
        <h2 class="font-heading h4 mb-4">Sign up</h2>
        <p class="d-flex align-items-center justify-content-center fs-9 mb-0"><span class="me-1 text-white text-opacity-50">Already have an account?</span><a class="btn fs-9 btn-link p-0 text-danger fw-medium" href="#">Login</a></p>
      </div>
      <form action="">
        <div class="mb-8">
          <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><a class="btn w-100 mb-8 d-inline-flex align-items-center justify-content-center btn-danger btn-shadow-danger border-3 border-white border-opacity-10" href="#">Sign up</a>
        <div class="text-center"><span class="d-inline-block fs-10 text-secondary text-opacity-75">You acknowledge that you read, and agree to our</span>
          <div><a class="btn btn-link fs-10 p-0 text-secondary fw-semibold" href="#">Terms</a> <span class="fs-10 text-secondary text-opacity-75"> and</span> <a class="btn btn-link fs-10 p-0 text-secondary fw-semibold" href="#"> Privacy Policy.</a></div>
        </div>
      </form>
    </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 #3359

Bootstrap

Vista

<section class="position-relative pt-12 pt-lg-24 pb-40 pb-md-52 pb-lg-96 bg-danger-dark overflow-hidden">
  <div class="container"><img class="d-none d-lg-block img-fluid position-absolute bottom-0 start-50 h-100 translate-middle-x" src="vista-assets/images/cta/dashboard-pink.svg" alt=""><img class="d-block d-lg-none img-fluid position-absolute bottom-0 start-50 translate-middle-x" src="vista-assets/images/cta/dashboard-pink.svg" alt="">
    <div class="mw-2xl mx-auto text-center position-relative">
      <h3 class="font-heading mb-10">Start Bookkeeping Today</h3>
      <div class="d-flex flex-column flex-md-row justify-content-center align-items-center gap-8"><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="M7.375 3.75L13.625 10L7.375 16.25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a><a class="btn p-0 fs-9 border-0" href="#">Learn More</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 #3360

Bootstrap

Vista

<section class="position-relative py-12 py-sm-24 bg-danger-dark">
  <div class="container">
    <div class="mw-5xl mx-auto">
      <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>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Framework

UI Library

Components

Bootstrap Component #3341

Get the code for 13,400+ components

Bootstrap Component #3342

Get the code for 13,400+ components

Bootstrap Component #3343

Get the code for 13,400+ components

Bootstrap Component #3344

Get the code for 13,400+ components

Bootstrap Component #3345

Get the code for 13,400+ components

Bootstrap Component #3346

Get the code for 13,400+ components

Bootstrap Component #3347

Get the code for 13,400+ components

Bootstrap Component #3348

Get the code for 13,400+ components

Bootstrap Component #3349

Get the code for 13,400+ components

Bootstrap Component #3350

Get the code for 13,400+ components

Bootstrap Component #3351

Get the code for 13,400+ components

Bootstrap Component #3352

Get the code for 13,400+ components

Bootstrap Component #3353

Get the code for 13,400+ components

Bootstrap Component #3354

Get the code for 13,400+ components

Bootstrap Component #3355

Get the code for 13,400+ components

Bootstrap Component #3356

Get the code for 13,400+ components

Bootstrap Component #3357

Get the code for 13,400+ components

Bootstrap Component #3358

Get the code for 13,400+ components

Bootstrap Component #3359

Get the code for 13,400+ components

Bootstrap Component #3360

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