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

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 ms-n32 mt-n32" src="casper-assets/blur/center-violet-blue.svg" alt=""/>
  <div class="container position-relative">
    <div class="position-relative mw-md mw-md-2xl mw-lg-none mx-auto py-20 px-8 px-lg-32 px-xl-40 rounded overflow-hidden"><img class="position-absolute top-0 start-0 h-100 w-100" src="casper-assets/stats/bg-gradient.png" alt=""/>
      <div class="row align-items-center position-relative">
        <div class="col-md-6 mb-16 mb-md-0">
          <div class="mw-sm mw-md-md mw-xl-xl mx-auto mx-md-0">
            <h3 class="font-heading fw-medium mb-3">Our Targets</h3>
            <p class="mw-sm mw-xl-lg fs-6 mb-16">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p><a class="btn btn-primary text-black" href="#"><span class="me-2">LEARN MORE</span>
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z" fill="currentColor"></path>
              </svg></a>
          </div>
        </div>
        <div class="col-md-6"><img class="img-fluid d-block mx-auto me-md-0" src="casper-assets/stats/dashboard-bg-none.png" 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

Bootstrap Component #3642

Bootstrap

Casper

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container position-relative"><a class="d-none d-lg-block position-absolute top-50 start-50 translate-middle navbar-brand" href="#"><img class="img-fluid" src="casper-assets/logos/casper-logo-white.svg" alt=""/></a><a class="d-lg-none navbar-brand" href="#"><img class="img-fluid" src="casper-assets/logos/casper-logo-white.svg" alt=""/></a>
      <div class="collapse navbar-collapse" id="nav01">
        <ul class="navbar-nav d-none d-xl-flex">
          <li class="nav-item"><a class="nav-link text-uppercase" href="#">FEATURED</a></li>
          <li class="nav-item"><a class="nav-link text-uppercase" href="#">SOLUTIONS</a></li>
          <li class="nav-item"><a class="nav-link text-uppercase" href="#">PRODUCTS</a></li>
          <li class="nav-item"><a class="nav-link text-uppercase" href="#">ARTICLES</a></li>
        </ul>
        <div class="ms-auto me-10"><a class="btn me-4 btn-sm text-white text-uppercase" href="#">SIGN IN</a><a class="btn btn-sm btn-primary text-black text-uppercase" href="#">SIGN UP</a></div>
      </div>
      <button class="navbar-burger btn border-0 p-0 text-white" 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="M3 16H29" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 8H29" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M20 24L29 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-xs" 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 justify-content-between py-8 px-8 bg-white overflow-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 #3643

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0" src="casper-assets/about/doublie-line-top-right.svg" alt=""/><img class="position-absolute top-0 end-0" src="casper-assets/blur/blur-circle-blue.svg" alt=""/>
  <div class="container position-relative">
    <div class="row">
      <div class="col-12 col-lg-6 mb-10">
        <div class="mw-sm">
          <h2 class="font-heading fw-medium text-white mb-6">About Us Casper</h2><a class="btn p-0 btn-link" href="#"><span class="me-2">GET TO KNOW US</span>
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.92 6.62C17.8185 6.37565 17.6243 6.18147 17.38 6.08C17.2598 6.02876 17.1307 6.00158 17 6H7C6.73478 6 6.48043 6.10536 6.29289 6.29289C6.10536 6.48043 6 6.73478 6 7C6 7.26522 6.10536 7.51957 6.29289 7.70711C6.48043 7.89464 6.73478 8 7 8H14.59L6.29 16.29C6.19627 16.383 6.12188 16.4936 6.07111 16.6154C6.02034 16.7373 5.9942 16.868 5.9942 17C5.9942 17.132 6.02034 17.2627 6.07111 17.3846C6.12188 17.5064 6.19627 17.617 6.29 17.71C6.38296 17.8037 6.49356 17.8781 6.61542 17.9289C6.73728 17.9797 6.86799 18.0058 7 18.0058C7.13201 18.0058 7.26272 17.9797 7.38458 17.9289C7.50644 17.8781 7.61704 17.8037 7.71 17.71L16 9.41V17C16 17.2652 16.1054 17.5196 16.2929 17.7071C16.4804 17.8946 16.7348 18 17 18C17.2652 18 17.5196 17.8946 17.7071 17.7071C17.8946 17.5196 18 17.2652 18 17V7C17.9984 6.86932 17.9712 6.74022 17.92 6.62Z" fill="currentColor"></path>
            </svg></a>
        </div>
      </div>
      <div class="col-12 col-lg-6 mb-10">
        <div class="mw-2xl ms-lg-auto">
          <p class="fs-6 text-light-light mb-6">Our Chat AI platform is powered by the latest advancements in natural language processing (NLP) and machine learning, making it capable of engaging in natural and human-like conversations. Say goodbye to clunky interactions and hello to seamless communication that feels just like chatting with a real person.</p>
          <p class="fs-6 text-light-light mb-0">Whether you need a chatbot for customer support, sales, lead generation, or any other use case, our platform is versatile enough to cater to your specific requirements. Our APIs and integration capabilities allow for easy deployment across websites, applications, and messaging platforms, providing a consistent experience for your users.</p>
        </div>
      </div>
      <div class="col-12 col-sm-6 mb-10 mb-sm-0">
        <div class="mw-sm">
          <div class="mb-16">
            <h2 class="fw-medium text-white mb-4">300+</h2><span class="text-secondary">PRODUCTS</span>
          </div>
          <div>
            <h2 class="fw-medium text-white mb-4">220+</h2><span class="text-secondary">MOBILE TEMPLATE</span>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3644

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-n80 mt-n40" src="casper-assets/blur/blur-center-violet.svg" alt=""/>
  <div class="container position-relative"><img class="d-none d-lg-block position-absolute top-0 start-50 ms-64 ms-lg-0 mt-n8 animate-spinStar" src="casper-assets/footer/blink-star.png" alt=""/><img class="d-none d-sm-block d-md-none position-absolute top-0 start-50 ms-24 ms-sm-40 mt-n8" src="casper-assets/footer/blink-star.png" alt=""/>
    <div class="row align-items-center">
      <div class="col-md-6 mb-12 mb-md-0">
        <div class="mw-xs mw-sm-sm mw-md-lg">
          <h4 class="text-white fw-medium mb-0">Gain valuable insights into your users&apos; preferences</h4>
        </div>
      </div>
      <div class="col-md-6">
        <div class="d-flex flex-column flex-sm-row gap-2 justify-content-md-end"><a class="btn btn-sm border-0 btn-light bg-white bg-opacity-10 rounded-1" href="#">
            <div class="d-flex align-items-center"><img class="img-fluid" src="casper-assets/footer/app-store.svg" alt=""/>
              <div class="ms-3"><span class="d-block text-light-light lh-1" style="font-size: 10px;">Download on</span><span class="small fw-medium text-white">App Store</span></div>
            </div></a><a class="btn btn-sm border-0 btn-light bg-white bg-opacity-10 rounded-1" href="#">
            <div class="d-flex align-items-center"><img class="img-fluid" src="casper-assets/footer/google-store.svg" alt=""/>
              <div class="ms-3"><span class="d-block text-light-light lh-1" style="font-size: 10px;">Download on</span><span class="small fw-medium text-white">Play Store</span></div>
            </div></a></div>
      </div>
    </div>
    <div class="mt-16 pt-16 border-2 border-top border-white border-opacity-10">
      <div class="row justify-content-between">
        <div class="col-12 col-md-5 mb-12 mb-md-0">
          <div class="mw-xs mw-lg-sm"><a class="d-inline-block mb-8" href="#"><img class="img-fluid d-block" src="casper-assets/logos/casper-logo-white.svg" alt=""/></a>
            <p class="text-white mb-8">CASPER  is here to revolutionize the way you interact with your audience.</p><span class="text-secondary">&copy; Casper. All rights reserved</span>
          </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 #3645

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute bottom-0 end-0" src="casper-assets/blur/blur-bottom-blue-right.svg" alt=""/><img class="position-absolute top-0 start-0" src="casper-assets/blur/blur-left-top-violet.svg" alt=""/>
  <div class="container position-relative">
    <div class="text-center mb-14"><span class="d-block mb-6 text-light-light">Type Caption Here</span>
      <h2 class="h3 font-heading fw-medium text-white mb-0">Blog &amp; Articles</h2>
    </div>
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row">
        <div class="col-lg-6 mb-8 mb-lg-0">
          <div>
            <div><img class="img-fluid d-block w-100" src="casper-assets/blog/machine-box.png" alt=""/></div>
            <div class="position-relative"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/blur/bg-blur-bottom-card.png" alt=""/>
              <div class="position-relative py-10 px-6 px-sm-10">
                <h5 class="text-white fw-medium mb-4">Consectures Dummy Content Velit officia consequat duis</h5>
                <p class="text-light mb-4">By understanding your visitors&apos; needs, our chat assistant creates a unique experience</p>
                <div class="d-flex align-items-center"><a class="btn btn-outline-primary align-items-center justify-content-center p-0" href="#" style="width: 56px; height: 56px;">
                    <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z" fill="white"></path>
                    </svg></a><span class="ms-5 small text-white">Read more</span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="position-relative mb-8"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/blur/bg-blur-right-card.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

Bootstrap Component #3646

Bootstrap

Casper

<section class="py-12 pb-md-32 pt-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute bottom-0 start-0" src="casper-assets/blur/blur-left-center-violet.svg" alt=""/><img class="position-absolute top-0 end-0" src="casper-assets/blur/blur-circle-blue.svg" alt=""/>
  <div class="container position-relative"><img class="d-none d-sm-block position-absolute top-0 start-0 mt-24 mt-md-10 mt-lg-0 ms-n10 ms-lg-0 col-md-3 col-lg-2 col-xl-auto" src="casper-assets/pricing/planet.png" alt=""/><img class="d-none d-sm-block position-absolute bottom-0 end-0 col-3 col-xl-auto" src="casper-assets/pricing/robot-fly.png" alt=""/>
    <div class="mw-2xl mx-auto mb-20 text-center"><span class="badge text-uppercase mb-6" style="background: linear-gradient(158deg, #826FFF 1.14%, #511CFF 51.87%, #00D1FF 104.76%);">Pricing Plan</span>
      <h2 class="font-heading fw-medium text-white mb-4">Choose Your Plan</h2>
      <div class="d-flex align-items-center justify-content-center"><span class="display-5 text-white">Billed Monthly</span>
        <div class="d-flex mx-3 rounded-pill bg-primary" style="padding: 2px;">
          <button class="btn border-0 p-0 bg-transparent" style="width: 20px; height: 20px;"></button>
          <button class="btn border-0 p-0 bg-primary-dark" style="width: 20px; height: 20px;"></button>
        </div><span class="display-5 text-white">Billed Yearly</span>
      </div>
    </div>
    <div class="mw-xs mw-md-3xl mx-auto">
      <div class="p-10 mb-8 bg-white bg-opacity-10 rounded" style="backdrop-filter: blur(5px);">
        <div class="row">
          <div class="col-md-2 mb-4 mb-md-0"><img class="img-fluid" src="casper-assets/pricing/robot-sm.png" alt=""/></div>
          <div class="col-md-5 mb-4 mb-md-0">
            <div>
              <h5 class="display-3 fw-medium text-white">Basic</h5>
              <p class="small text-white mb-0">Simply dummy text of the printing and typesetting industry.</p>
            </div>
          </div>
          <div class="col-md-auto ms-auto">
            <div><span class="d-block mb-3 display-3 fw-medium text-white">$25</span><a class="btn btn-primary text-black" href="#"><span class="me-2">CHOOSE PLAN</span>
                <svg width="24" height="24" viewbox="0 0 24 24" 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 #3647

Bootstrap

Casper

<section class="position-relative bg-dark overflow-hidden"><img class="d-none d-lg-block position-absolute top-0 start-0 col-4 col-xl-5 h-100" src="casper-assets/sign-in/image-left-side.png" alt=""/>
  <div class="container">
    <div class="mw-lg mw-lg-xl mx-auto me-lg-0 py-12 py-md-24">
      <h2 class="display-2 font-heading fw-medium text-white mb-6">Sign in to your account</h2>
      <p class="display-5 lh-lg text-light-light mb-16">Casper is powered by state-of-the-art artificial intelligence and ensuring natural and meaningful interactions</p>
      <div class="mw-md">
        <form action="">
          <div class="row mb-6">
            <div class="col-md-6 mb-4 mb-md-0"><a class="btn w-100 btn-sm btn-outline-secondary" href="#">
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M15.12 5.32H17V2.14C16.0897 2.04535 15.1751 1.99862 14.26 2C11.54 2 9.67999 3.66 9.67999 6.7V9.32H6.60999V12.88H9.67999V22H13.36V12.88H16.42L16.88 9.32H13.36V7.05C13.36 6 13.64 5.32 15.12 5.32Z" fill="white"></path>
                </svg><span class="ms-2">Login with Facebook</span></a></div>
            <div class="col-md-6"><a class="btn w-100 btn-sm btn-outline-secondary" href="#">
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.94 5.19C15.3181 4.75428 15.6063 4.24817 15.7882 3.70074C15.9701 3.1533 16.0421 2.57533 16 2C14.8394 2.09369 13.762 2.63956 13 3.52C12.6351 3.94198 12.3586 4.43288 12.1868 4.96364C12.0151 5.49441 11.9516 6.05424 12 6.61C12.5662 6.61472 13.1258 6.4891 13.6356 6.24286C14.1454 5.99662 14.5918 5.63637 14.94 5.19ZM17.46 12.63C17.4667 11.8637 17.6686 11.1118 18.0465 10.4452C18.4244 9.77859 18.966 9.21926 19.62 8.82C19.2073 8.22524 18.6616 7.73483 18.0263 7.38767C17.391 7.04052 16.6835 6.84615 15.96 6.82C14.4 6.66 12.96 7.73 12.13 7.73C11.3 7.73 10.13 6.84 8.83003 6.86C7.98016 6.888 7.15205 7.13578 6.42648 7.57919C5.70091 8.02259 5.10264 8.64648 4.69003 9.39C2.93003 12.45 4.24003 17 6.00003 19.47C6.80003 20.68 7.80003 22.05 9.12003 22C10.44 21.95 10.87 21.18 12.4 21.18C13.93 21.18 14.4 22 15.7 21.97C17 21.94 17.92 20.73 18.76 19.52C19.3551 18.6415 19.8199 17.6816 20.14 16.67C19.3475 16.332 18.6714 15.7693 18.1951 15.0513C17.7188 14.3333 17.4633 13.4916 17.46 12.63Z" fill="white"></path>
                </svg><span class="ms-2">Login with Apple</span></a></div>
          </div>
          <div class="d-flex align-items-center">
            <div class="w-100 border-bottom border-secondary"></div><span class="d-inline-block flex-shrink-0 mx-4 text-light-light">Or</span>
            <div class="w-100 border-bottom border-secondary"></div>
          </div>
          <div class="mb-5">
            <label class="form-label text-white" for="">Email</label>
            <input class="form-control rounded-1 bg-secondary-dark" type="email" placeholder="pat@saturn.dev"/>

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

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-50 end-0 translate-middle-y" src="casper-assets/blur/blur-center-right-violet.svg" alt=""/>
  <div class="container position-relative"><img class="d-none d-sm-block position-absolute top-0 end-0 mt-n10 me-xl-24 animate-spinStar" src="casper-assets/services/blink-star.png" alt=""/>
    <div class="mw-lg mw-lg-7xl mx-auto position-relative">
      <div class="mw-4xl mb-16">
        <h2 class="font-heading fw-medium text-white mb-6">Our Services</h2>
        <p class="mw-xl display-5 lh-lg text-light-light mb-0">Casper is powered by state-of-the-art artificial intelligence and ensuring natural and meaningful interactions</p>
      </div>
      <div class="row">
        <div class="col-12 col-lg-4 mb-8 mb-lg-0"><a class="d-flex flex-column h-100 p-8 border border-2 border-white rounded" href="#">
            <div class="d-flex mb-24 mb-lg-52 align-items-center justify-content-between"><img src="casper-assets/services/circle-icon1.png" alt=""/>
              <svg width="60" height="60" viewbox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.5 42.5L42.5 17.5" stroke="#1AC2E7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M17.5 17.5H42.5V42.5" stroke="#1AC2E7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <div class="mt-auto">
              <h4 class="display-3 fw-medium text-info">Personalized Experiences</h4>
              <p class="text-secondary mb-0">By understanding your visitors&apos; needs, our chat assistant creates a unique experience that keeps them coming back for more unique process.</p>
            </div></a></div>
        <div class="col-12 col-lg-4 mb-8 mb-lg-0"><a class="d-flex flex-column h-100 p-8 border border-2 border-secondary rounded" href="#">
            <div class="d-flex mb-24 mb-lg-52"><img src="casper-assets/services/circle-icon2.png" alt=""/></div>
            <div class="mt-auto">
              <h4 class="display-3 fw-medium text-white">Analytics and Insights</h4>
              <p class="text-secondary mb-0">Our chat assistant is available round the clock, providing instant responses and support, even when your team is offline. Say goodbye to missed inquiries</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 #3649

Bootstrap

Casper

<section class="py-12 pt-sm-24 pb-lg-24 pt-xl-32 bg-dark position-relative overflow-hidden"><img class="position-absolute top-50 start-50 translate-middle" src="casper-assets/blur/center-violet-blue.svg" alt=""/><img class="position-absolute top-0 end-0" src="casper-assets/team/lines-circle.svg" alt=""/><img class="d-none d-sm-block position-absolute top-0 end-0 mt-16 me-md-80 animate-spinStar" src="casper-assets/team/blink-star.png" alt=""/>
  <div class="container position-relative">
    <div class="mw-md mw-md-2xl mw-lg-6xl mx-auto">
      <div class="row mb-14 align-items-end">
        <div class="col-md-6 mb-8 mb-lg-0">
          <div class="mw-sm mw-md-none">
            <h3 class="font-heading fw-medium text-white mb-6">Get to know our amazing Team</h3>
            <p class="display-5 lh-lg text-secondary mb-0">Mi turpis turpis in justo pellentesque id nibh praesent.</p>
          </div>
        </div>
        <div class="col-md-6 text-md-end position-relative"><a class="btn btn-outline-light" href="#"><span class="me-2">SHOW ALL PEOPLE</span>
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z" fill="currentColor"></path>
            </svg></a></div>
      </div>
      <div class="row">
        <div class="col-12 col-md-6 col-lg-3 mb-8 mb-lg-0">
          <div class="position-relative rounded overflow-hidden">
            <div class="position-absolute bottom-0 start-0 w-100 p-6" style="background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);"><span class="d-block display-5 text-white fw-medium">Dianne Russell</span><span class="d-block text-light-light fw-medium">CEO &amp; Founder</span></div><img class="img-fluid w-100" style="height: 348px; object-fit: cover;" src="casper-assets/team/people-photos-1.png" alt=""/>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3 mb-8 mb-lg-0">
          <div class="position-relative rounded overflow-hidden">
            <div class="position-absolute bottom-0 start-0 w-100 p-6" style="background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);"><span class="d-block display-5 text-white fw-medium">Kathryn Murphy</span><span class="d-block text-light-light fw-medium">CEO &amp; Founder</span></div><img class="img-fluid w-100" style="height: 348px; object-fit: cover;" src="casper-assets/team/people-photos-2.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

Bootstrap Component #3650

Bootstrap

Casper

<section class="py-12 pb-lg-24 pt-lg-32 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-n52 mt-n80" src="casper-assets/blur/blur-center-violet.svg" alt=""/>
  <div class="container position-relative"><img class="d-none d-lg-block position-absolute top-0 start-50 ms-n32 mt-n28 mt-xl-n24 animate-spinStar" src="casper-assets/logo-clouds/blink-star.png" alt=""/>
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="row align-items-center">
        <div class="col-lg-6 mb-14 mb-lg-0">
          <div>
            <h3 class="font-heading fw-medium text-white mb-8">Integrate your UI Libray with Casper</h3>
            <p class="mw-lg fs-6 text-light-light mb-8">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p><a class="btn btn-primary text-black" href="#"><span class="me-2">LEARN MORE</span>
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z" fill="black"></path>
              </svg></a>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="mw-sm ms-lg-auto">
            <div class="row mb-n8">
              <div class="col-6 mb-8">
                <div class="position-relative"><img class="position-relative img-fluid d-block w-100" src="casper-assets/blur/small-logo-box.png" alt=""/><img class="position-absolute top-50 start-50 translate-middle" src="casper-assets/logo-clouds/logo-color-icons3.svg" alt=""/></div>
              </div>
              <div class="col-6 mb-8">
                <div class="position-relative"><img class="position-relative img-fluid d-block w-100" src="casper-assets/blur/small-logo-box.png" alt=""/><img class="position-absolute top-50 start-50 translate-middle" src="casper-assets/logo-clouds/logo-color-icons4.svg" alt=""/></div>
              </div>
              <div class="col-6 mb-8">
                <div class="position-relative"><img class="position-relative img-fluid d-block w-100" src="casper-assets/blur/small-logo-box.png" alt=""/><img class="position-absolute top-50 start-50 translate-middle" src="casper-assets/logo-clouds/logo-color-icons5.svg" alt=""/></div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3651

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute bottom-0 end-0" src="casper-assets/blur/blur-bottom-blue-right.svg" alt=""/><img class="position-absolute top-0 start-0" src="casper-assets/blur/blur-left-top-violet.svg" alt=""/>
  <div class="container position-relative">
    <div class="row align-items-center">
      <div class="col-lg-5 mb-14 mb-lg-0">
        <div class="position-relative px-10"><img class="d-block w-100 mw-sm mx-auto img-fluid position-relative" src="casper-assets/faq/bg-gradient-vartical.png" alt=""/><img class="position-absolute top-50 start-50 translate-middle img-fluid" src="casper-assets/faq/robot-lg.png" alt=""/></div>
      </div>
      <div class="col-lg-7">
        <div class="mw-lg mx-auto mw-lg-2xl me-lg-0">
          <div class="d-flex py-6 px-7 mb-14 align-items-center bg-secondary bg-opacity-25 text-light-light rounded-pill">
            <button class="btn me-7 btn-link p-0" type="">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21.7099 20.29L17.9999 16.61C19.44 14.8144 20.1374 12.5353 19.9487 10.2413C19.76 7.94733 18.6996 5.81281 16.9854 4.27667C15.2713 2.74053 13.0337 1.91954 10.7328 1.9825C8.43194 2.04546 6.24263 2.98759 4.61505 4.61517C2.98747 6.24275 2.04534 8.43207 1.98237 10.7329C1.91941 13.0338 2.74041 15.2714 4.27655 16.9855C5.81269 18.6997 7.94721 19.7601 10.2412 19.9488C12.5352 20.1375 14.8143 19.4401 16.6099 18L20.2899 21.68C20.3829 21.7738 20.4935 21.8482 20.6153 21.8989C20.7372 21.9497 20.8679 21.9758 20.9999 21.9758C21.1319 21.9758 21.2626 21.9497 21.3845 21.8989C21.5063 21.8482 21.6169 21.7738 21.7099 21.68C21.8901 21.4936 21.9909 21.2444 21.9909 20.985C21.9909 20.7257 21.8901 20.4765 21.7099 20.29ZM10.9999 18C9.61544 18 8.26206 17.5895 7.11091 16.8203C5.95977 16.0511 5.06256 14.9579 4.53275 13.6788C4.00293 12.3997 3.86431 10.9923 4.13441 9.63439C4.4045 8.27653 5.07119 7.02925 6.05016 6.05028C7.02912 5.07131 8.27641 4.40463 9.63427 4.13453C10.9921 3.86443 12.3996 4.00306 13.6787 4.53287C14.9578 5.06268 16.051 5.95989 16.8202 7.11103C17.5894 8.26218 17.9999 9.61556 17.9999 11C17.9999 12.8565 17.2624 14.637 15.9497 15.9498C14.6369 17.2625 12.8564 18 10.9999 18Z" fill="white"></path>
              </svg>
            </button>
            <input class="form-control p-0 bg-transparent border-0" type="search" placeholder="Search question, keywords, articles"/>
          </div>
          <div>
            <button class="d-block mb-6 w-100 bg-transparent text-start fw-normal border-0 p-0">
              <div class="pb-6 border-bottom border-2 border-white border-opacity-25">
                <div class="d-flex align-items-start">
                  <div class="me-6">
                    <div class="d-inline-flex align-items-center justify-content-center rounded-pill bg-primary" style="width: 44px; height: 44px;">
                      <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5 11L19 11C19.2652 11 19.5196 11.1054 19.7071 11.2929C19.8946 11.4804 20 11.7348 20 12C20 12.2652 19.8946 12.5196 19.7071 12.7071C19.5196 12.8946 19.2652 13 19 13L5 13C4.73478 13 4.48043 12.8946 4.29289 12.7071C4.10536 12.5196 4 12.2652 4 12C4 11.7348 4.10536 11.4804 4.29289 11.2929C4.48043 11.1054 4.73478 11 5 11Z" fill="white"></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 #3652

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-n80 mt-n40" src="casper-assets/blur/blur-center-violet.svg" alt=""/>
  <div class="container position-relative">
    <div>
      <div class="d-flex flex-column flex-md-row mb-16 align-items-md-center justify-content-between">
        <div class="mw-sm mb-10 mb-md-0"><a class="d-inline-block mb-8" href="#"><img class="img-fluid" src="casper-assets/logos/casper-logo-white.svg" alt=""/></a>
          <p class="text-white mb-0">CASPER  is here to revolutionize the way you interact with your audience.</p>
        </div>
        <div class="mb-n3">
          <div class="d-inline-block mb-3 me-3 bg-white bg-opacity-10 rounded-pill"><a class="btn btn-outline-primary p-0 align-items-center justify-content-center border-0" href="#" style="width: 60px; height: 60px;">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M15.12 5.32H17V2.14C16.0897 2.04535 15.1751 1.99862 14.26 2C11.54 2 9.67999 3.66 9.67999 6.7V9.32H6.60999V12.88H9.67999V22H13.36V12.88H16.42L16.88 9.32H13.36V7.05C13.36 6 13.64 5.32 15.12 5.32Z" fill="white"></path>
              </svg></a></div>
          <div class="d-inline-block mb-3 me-3 bg-white bg-opacity-10 rounded-pill"><a class="btn btn-outline-primary p-0 align-items-center justify-content-center border-0" href="#" style="width: 60px; height: 60px;">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M22 5.8C21.2483 6.12609 20.4534 6.34166 19.64 6.44C20.4982 5.92732 21.1413 5.12078 21.45 4.17C20.6436 4.65006 19.7608 4.98829 18.84 5.17C18.2245 4.50257 17.405 4.05829 16.5098 3.90685C15.6147 3.7554 14.6945 3.90535 13.8938 4.33319C13.093 4.76102 12.4569 5.44253 12.0852 6.27083C11.7135 7.09914 11.6273 8.02739 11.84 8.91C10.2094 8.82752 8.61444 8.40295 7.15865 7.66386C5.70287 6.92477 4.41885 5.88769 3.39 4.62C3.02914 5.25016 2.83952 5.96382 2.84 6.69C2.83872 7.36438 3.00422 8.02861 3.32176 8.62356C3.63929 9.21851 4.09902 9.72571 4.66 10.1C4.00798 10.0823 3.36989 9.90729 2.8 9.59V9.64C2.80489 10.5849 3.13599 11.4991 3.73731 12.228C4.33864 12.9568 5.17326 13.4556 6.1 13.64C5.74326 13.7486 5.37287 13.8058 5 13.81C4.74189 13.807 4.48442 13.7836 4.23 13.74C4.49391 14.5528 5.00462 15.2631 5.69107 15.7722C6.37753 16.2812 7.20558 16.5635 8.06 16.58C6.6172 17.7153 4.83588 18.3349 3 18.34C2.66574 18.3411 2.33174 18.3211 2 18.28C3.87443 19.4903 6.05881 20.1327 8.29 20.13C9.82969 20.146 11.3571 19.855 12.7831 19.2741C14.2091 18.6931 15.505 17.8339 16.5952 16.7465C17.6854 15.6591 18.548 14.3654 19.1326 12.9409C19.7172 11.5164 20.012 9.98972 20 8.45C20 8.28 20 8.1 20 7.92C20.7847 7.33481 21.4615 6.61742 22 5.8Z" fill="white"></path>
              </svg></a></div>
          <div class="d-inline-block mb-3 me-3 bg-white bg-opacity-10 rounded-pill"><a class="btn btn-outline-primary p-0 align-items-center justify-content-center border-0" href="#" style="width: 60px; height: 60px;">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 9.52C11.5095 9.52 11.03 9.66545 10.6222 9.93795C10.2144 10.2105 9.89648 10.5978 9.70878 11.0509C9.52107 11.5041 9.47196 12.0028 9.56765 12.4838C9.66334 12.9649 9.89954 13.4068 10.2464 13.7536C10.5932 14.1005 11.0351 14.3367 11.5162 14.4323C11.9972 14.528 12.4959 14.4789 12.9491 14.2912C13.4022 14.1035 13.7895 13.7856 14.062 13.3778C14.3346 12.97 14.48 12.4905 14.48 12C14.48 11.6743 14.4159 11.3518 14.2912 11.0509C14.1666 10.7501 13.9839 10.4767 13.7536 10.2464C13.5233 10.0161 13.2499 9.83341 12.9491 9.70878C12.6482 9.58415 12.3257 9.52 12 9.52ZM21.93 7.07C21.9247 6.29776 21.7825 5.53257 21.51 4.81C21.3093 4.28126 20.9987 3.80109 20.5988 3.40119C20.1989 3.00128 19.7187 2.69072 19.19 2.49C18.4674 2.21746 17.7022 2.07526 16.93 2.07C15.64 2 15.26 2 12 2C8.74 2 8.36 2 7.07 2.07C6.29776 2.07526 5.53257 2.21746 4.81 2.49C4.28126 2.69072 3.80109 3.00128 3.40119 3.40119C3.00128 3.80109 2.69072 4.28126 2.49 4.81C2.21746 5.53257 2.07526 6.29776 2.07 7.07C2 8.36 2 8.74 2 12C2 15.26 2 15.64 2.07 16.93C2.08076 17.705 2.22277 18.4725 2.49 19.2C2.68983 19.7263 3.00013 20.2037 3.4 20.6C3.79819 21.0023 4.27939 21.3129 4.81 21.51C5.53257 21.7825 6.29776 21.9247 7.07 21.93C8.36 22 8.74 22 12 22C15.26 22 15.64 22 16.93 21.93C17.7022 21.9247 18.4674 21.7825 19.19 21.51C19.7206 21.3129 20.2018 21.0023 20.6 20.6C20.9999 20.2037 21.3102 19.7263 21.51 19.2C21.7823 18.4739 21.9244 17.7055 21.93 16.93C22 15.64 22 15.26 22 12C22 8.74 22 8.36 21.93 7.07ZM19.39 15.07C19.3579 15.6871 19.2262 16.295 19 16.87C18.8059 17.3497 18.5173 17.7854 18.1514 18.1514C17.7854 18.5173 17.3497 18.8059 16.87 19C16.2895 19.2136 15.6783 19.3318 15.06 19.35C14.27 19.35 14.06 19.35 12 19.35C9.94 19.35 9.73 19.35 8.94 19.35C8.32173 19.3318 7.71049 19.2136 7.13 19C6.6341 18.8157 6.18628 18.5217 5.82 18.14C5.45767 17.7813 5.17784 17.3479 5 16.87C4.78556 16.2901 4.67061 15.6782 4.66 15.06C4.66 14.27 4.66 14.06 4.66 12C4.66 9.94 4.66 9.73 4.66 8.94C4.67061 8.32183 4.78556 7.70988 5 7.13C5.18428 6.6341 5.47827 6.18628 5.86 5.82C6.22033 5.45962 6.65326 5.18009 7.13 5C7.71049 4.78641 8.32173 4.66821 8.94 4.65C9.73 4.65 9.94 4.65 12 4.65C14.06 4.65 14.27 4.65 15.06 4.65C15.6783 4.66821 16.2895 4.78641 16.87 5C17.3659 5.18428 17.8137 5.47827 18.18 5.86C18.5423 6.21875 18.8222 6.65213 19 7.13C19.2136 7.71049 19.3318 8.32173 19.35 8.94C19.35 9.73 19.35 9.94 19.35 12C19.35 14.06 19.42 14.27 19.39 15.06V15.07ZM17.79 7.63C17.6709 7.30698 17.4832 7.01364 17.2398 6.77021C16.9964 6.52678 16.703 6.33906 16.38 6.22C15.9365 6.06626 15.4693 5.99179 15 6C14.22 6 14 6 12 6C10 6 9.78 6 9 6C8.52827 6.00461 8.06107 6.09263 7.62 6.26C7.30193 6.37366 7.01169 6.55371 6.76858 6.7882C6.52547 7.02269 6.33506 7.30624 6.21 7.62C6.06478 8.06537 5.99383 8.5316 6 9C6 9.78 6 10 6 12C6 14 6 14.22 6 15C6.00991 15.4712 6.09777 15.9375 6.26 16.38C6.37906 16.703 6.56678 16.9964 6.81021 17.2398C7.05364 17.4832 7.34698 17.6709 7.67 17.79C8.09667 17.9469 8.54565 18.0347 9 18.05C9.78 18.05 10 18.05 12 18.05C14 18.05 14.22 18.05 15 18.05C15.4717 18.0454 15.9389 17.9574 16.38 17.79C16.703 17.6709 16.9964 17.4832 17.2398 17.2398C17.4832 16.9964 17.6709 16.703 17.79 16.38C17.9574 15.9389 18.0454 15.4717 18.05 15C18.05 14.22 18.05 14 18.05 12C18.05 10 18.05 9.78 18.05 9C18.0503 8.5278 17.9621 8.05972 17.79 7.62V7.63ZM12 15.82C11.4988 15.82 11.0026 15.7211 10.5397 15.529C10.0768 15.3369 9.6563 15.0554 9.30238 14.7005C8.94846 14.3457 8.66803 13.9245 8.47714 13.4611C8.28626 12.9977 8.18868 12.5012 8.19 12C8.19 11.2441 8.4143 10.5051 8.83449 9.87669C9.25468 9.24828 9.85187 8.75866 10.5505 8.46983C11.2491 8.181 12.0177 8.10594 12.7589 8.25415C13.5002 8.40236 14.1808 8.76717 14.7147 9.30241C15.2485 9.83764 15.6116 10.5192 15.7578 11.2609C15.9041 12.0026 15.827 12.771 15.5363 13.4688C15.2457 14.1666 14.7545 14.7625 14.125 15.1811C13.4955 15.5996 12.7559 15.822 12 15.82ZM16 8.93C15.7789 8.9066 15.5744 8.80222 15.4257 8.63697C15.277 8.47172 15.1947 8.25729 15.1947 8.035C15.1947 7.81271 15.277 7.59828 15.4257 7.43303C15.5744 7.26778 15.7789 7.1634 16 7.14C16.2211 7.1634 16.4256 7.26778 16.5743 7.43303C16.723 7.59828 16.8053 7.81271 16.8053 8.035C16.8053 8.25729 16.723 8.47172 16.5743 8.63697C16.4256 8.80222 16.2211 8.9066 16 8.93Z" fill="white"></path>
              </svg></a></div>
          <div class="d-inline-block mb-3 bg-white bg-opacity-10 rounded-pill"><a class="btn btn-outline-primary p-0 align-items-center justify-content-center border-0" href="#" style="width: 60px; height: 60px;">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M23 9.71001C23.0495 8.27867 22.7365 6.85803 22.09 5.58001C21.6514 5.05561 21.0427 4.70172 20.37 4.58001C17.5875 4.32754 14.7936 4.22406 12 4.27001C9.21667 4.22197 6.43274 4.32211 3.66003 4.57001C3.11185 4.66973 2.60454 4.92686 2.20003 5.31001C1.30003 6.14001 1.20003 7.56001 1.10003 8.76002C0.954939 10.9176 0.954939 13.0825 1.10003 15.24C1.12896 15.9154 1.22952 16.5858 1.40003 17.24C1.5206 17.7451 1.76455 18.2124 2.11003 18.6C2.51729 19.0035 3.03641 19.2752 3.60003 19.38C5.75594 19.6461 7.92824 19.7564 10.1 19.71C13.6 19.76 16.67 19.71 20.3 19.43C20.8775 19.3317 21.4112 19.0596 21.83 18.65C22.11 18.3699 22.3191 18.0271 22.44 17.65C22.7977 16.5526 22.9733 15.4041 22.96 14.25C23 13.69 23 10.31 23 9.71001ZM9.74003 14.85V8.66001L15.66 11.77C14 12.69 11.81 13.73 9.74003 14.85Z" fill="white"></path>
              </svg></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 #3653

Bootstrap

Casper

<section class="bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-n52" src="casper-assets/blur/blur-center-violet.svg" alt=""/>
  <div class="row">
    <div class="position-absolute top-0 start-0 d-none d-sm-block col-2 col-md-3">
      <div class="mw-md position-relative">
        <div class="position-absolute top-0 start-0 w-100 py-24" style="z-index: 20; background: linear-gradient(180deg, #070C2A 0%, rgba(7, 12, 42, 0.00) 100%);"></div>
        <div class="row mb-n8">
          <div class="col-12 col-lg-6 mt-n8">
            <div class="position-relative mb-8"><img class="position-relative img-fluid d-block w-100" src="casper-assets/blur/small-logo-box.png" alt=""/>
              <div class="position-absolute top-0 start-0 w-100 h-100 p-4 d-flex align-items-center justify-content-center"><img class="img-fluid" src="casper-assets/logo-clouds/logo-color-icons3.svg" alt=""/></div>
            </div>
            <div class="position-relative mb-8"><img class="position-relative img-fluid d-block w-100" src="casper-assets/blur/small-logo-box.png" alt=""/>
              <div class="position-absolute top-0 start-0 w-100 h-100 p-4 d-flex align-items-center justify-content-center"><img class="img-fluid" src="casper-assets/logo-clouds/logo-color-icons4.svg" alt=""/></div>
            </div>
            <div class="position-relative mb-8"><img class="position-relative img-fluid d-block w-100" src="casper-assets/blur/small-logo-box.png" alt=""/>
              <div class="position-absolute top-0 start-0 w-100 h-100 p-4 d-flex align-items-center justify-content-center"><img class="img-fluid" src="casper-assets/logo-clouds/logo-color-icons2.svg" alt=""/></div>
            </div>
            <div class="position-relative mb-8"><img class="position-relative img-fluid d-block w-100" src="casper-assets/blur/small-logo-box.png" alt=""/>
              <div class="position-absolute top-0 start-0 w-100 h-100 p-4 d-flex align-items-center justify-content-center"><img class="img-fluid" src="casper-assets/logo-clouds/logo-color-icons5.svg" alt=""/></div>
            </div>
            <div class="position-relative mb-8"><img class="position-relative img-fluid d-block w-100" src="casper-assets/blur/small-logo-box.png" alt=""/>
              <div class="position-absolute top-0 start-0 w-100 h-100 p-4 d-flex align-items-center justify-content-center"><img class="img-fluid" src="casper-assets/logo-clouds/logo-color-icons7.svg" alt=""/></div>
            </div>
            <div class="position-relative mb-8"><img class="position-relative img-fluid d-block w-100" src="casper-assets/blur/small-logo-box.png" alt=""/>
              <div class="position-absolute top-0 start-0 w-100 h-100 p-4 d-flex align-items-center justify-content-center"><img class="img-fluid" src="casper-assets/logo-clouds/logo-color-icons6.svg" alt=""/></div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3654

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-n40 mt-n40" src="casper-assets/blur/center-violet-blue.svg" alt=""/>
  <div class="container position-relative">
    <div class="mb-16"><span class="d-block text-info mb-4">CONTACT US</span>
      <h2 class="font-heading fw-medium text-white mb-4">Let&rsquo;s stay connected</h2>
      <p class="display-5 text-light-light">We&rsquo;re 24/7 ready to help you at anytime</p>
    </div>
    <div class="row">
      <div class="col-xl-4 mt-20 mt-xl-0 order-last order-xl-first">
        <div class="mw-lg h-100"><img class="img-fluid d-block w-100 h-100" src="casper-assets/contact/map.png" alt=""/></div>
      </div>
      <div class="col-12 col-md-6 col-xl-4 mb-16 mb-md-0">
        <div>
          <form action="">
            <div class="mb-5">
              <label class="form-label text-white" for="">Name</label>
              <input class="form-control rounded-1 bg-secondary-dark" type="email" placeholder="Enter your name"/>
            </div>
            <div class="mb-5">
              <label class="form-label text-white" for="">Email</label>
              <input class="form-control rounded-1 bg-secondary-dark" type="email" placeholder="pat@saturn.dev"/>
            </div>
            <div class="mb-5">
              <label class="form-label text-white" for="">Email</label>
              <textarea class="form-control rounded-1 bg-secondary-dark" name="" style="resize: none;" rows="5" placeholder="Enter your message"></textarea>

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

Bootstrap

Casper

<section class="py-12 pb-md-32 pt-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute bottom-0 start-0" src="casper-assets/blur/blur-left-center-violet.svg" alt=""/><img class="position-absolute top-0 end-0" src="casper-assets/blur/blur-circle-blue.svg" alt=""/>
  <div class="container position-relative"><img class="position-absolute top-0 start-0 col-5 col-sm-3 col-xl-3 mt-52 mt-md-40 mt-lg-20 mt-xl-0" src="casper-assets/pricing/chip-robot.png" alt=""/>
    <div class="position-relative mw-2xl mx-auto mb-14 text-center"><span class="badge text-uppercase mb-6" style="background: linear-gradient(158deg, #826FFF 1.14%, #511CFF 51.87%, #00D1FF 104.76%);">Pricing Plan</span>
      <h2 class="font-heading fw-medium text-white mb-4">Choose Your Plan</h2>
      <p class="mw-md mx-auto fs-6 text-light-light mb-0">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
    </div>
    <div class="position-relative w-100 pb-4" style="overflow-x: scroll;">
      <table class="table-striped w-100 text-white" style="min-width: max-content;">
        <thead>
          <tr>
            <th scope="col p-0"></th>
            <th scope="col p-0">
              <div class="px-4">
                <div class="py-6 ps-6 pe-14 bg-secondary-dark bg-opacity-50 rounded"><img class="img-fluid d-block mb-6" src="casper-assets/pricing/avatar-pricing1.png" alt=""/>
                  <div><span class="display-2 fw-semibold text-white">$50</span><span class="fw-medium text-secondary">/month</span></div>
                </div>
              </div>
            </th>
            <th scope="col p-0">
              <div class="px-4">
                <div class="position-relative py-6 ps-6 pe-14 bg-secondary-dark bg-opacity-50 rounded overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/pricing/bg-gradient-square.png" alt=""/>
                  <div class="position-relative"><img class="img-fluid d-block mb-6" src="casper-assets/pricing/avatar-pricing2.png" alt=""/>
                    <div><span class="display-2 fw-semibold">$100</span><span class="fw-medium text-light-light">/month</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 #3656

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 mt-n40 me-n20" src="casper-assets/blur/center-violet-blue.svg" alt=""/>
  <div class="container position-relative">
    <div class="mb-16">
      <h2 class="font-heading fw-medium text-white mb-6">How it works</h2>
      <p class="display-5 lh-lg text-light-light mb-4">Mi turpis turpis in justo pellentesque id nibh praesent.</p>
    </div>
    <div class="row align-items-center">
      <div class="col-md-6 mb-12 mb-md-0">
        <div class="mw-xs mw-lg-sm mx-auto mx-md-0">
          <div class="mb-8"><span class="d-block display-2 fw-semibold text-secondary">01</span>
            <div class="my-6 pt-1 bg-white bg-opacity-10"></div>
            <p class="mw-sm display-5 lh-lg text-white mb-0">From answering questions to providing recommendations, our AI assistant will engage your visitors effortlessly.</p>
          </div>
          <div class="mb-8"><span class="d-block display-2 fw-semibold text-secondary">02</span>
            <div class="my-6 pt-1 bg-white bg-opacity-10"></div>
            <p class="mw-sm display-5 lh-lg text-white mb-0">From answering questions to providing recommendations, our AI assistant will engage your visitors effortlessly.</p>
          </div>
          <div><span class="d-block display-2 fw-semibold text-secondary">03</span>
            <div class="my-6 pt-1 bg-white bg-opacity-10"></div>
            <p class="mw-sm display-5 lh-lg text-white mb-0">Say goodbye to static web pages and hello to an interactive, conversational platform</p>
          </div>
        </div>
      </div>
      <div class="col-md-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 #3657

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute bottom-0 end-0" src="casper-assets/features/double-line-circle.svg" alt=""/><img class="position-absolute bottom-0 start-0" src="casper-assets/blur/blur-violet-bottom-left.svg" alt=""/>
  <div class="container position-relative"><img class="d-none d-sm-block position-absolute top-0 start-0 mt-n10 ms-md-20 animate-spinStar" src="casper-assets/features/blink-star.png" alt=""/>
    <div class="mw-xl mx-auto mb-16 text-center">
      <h2 class="font-heading fw-medium text-white mb-8">Intelligent Conversations</h2>
      <p class="display-5 lh-lg text-light-light">Casper is powered by state-of-the-art artificial intelligence and ensuring natural and meaningful interactions</p>
    </div>
    <div class="mw-sm mx-auto mw-lg-none">
      <div class="row">
        <div class="col-lg-4 mb-8 mb-lg-0">
          <div class="position-relative h-100 p-8"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/blur/blur-box-1.png" alt=""/>
            <div class="position-relative">
              <div class="d-flex mb-12 align-items-center">
                <div class="d-inline-flex flex-shrink-0 align-items-center justify-content-center bg-success rounded-pill" style="width: 60px; height: 60px;">
                  <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.6799 16.9298L15.7499 20.9998L17.5399 19.2098C17.6441 19.106 17.7241 18.9805 17.7743 18.8422C17.8244 18.7039 17.8434 18.5563 17.8299 18.4098L17.1799 11.2998" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M9.36994 4.71L7.99994 6.13M9.36994 17.46C9.4629 17.5537 9.5735 17.6281 9.69536 17.6789C9.81722 17.7297 9.94793 17.7558 10.0799 17.7558C10.212 17.7558 10.3427 17.7297 10.4645 17.6789C10.5864 17.6281 10.697 17.5537 10.7899 17.46L18.6999 9.55C20.1713 8.07754 20.9984 6.08157 20.9999 4C20.9999 3.73478 20.8946 3.48043 20.707 3.29289C20.5195 3.10536 20.2652 3 19.9999 3C17.9184 3.00151 15.9224 3.82867 14.4499 5.3L6.53994 13.21C6.44621 13.303 6.37182 13.4136 6.32105 13.5354C6.27028 13.6573 6.24414 13.788 6.24414 13.92C6.24414 14.052 6.27028 14.1827 6.32105 14.3046C6.37182 14.4264 6.44621 14.537 6.53994 14.63L9.36994 17.46ZM17.8699 16L19.2899 14.59L17.8699 16Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M12.75 6.82022L5.59 6.17022C5.44353 6.15675 5.2959 6.17575 5.15761 6.22588C5.01933 6.27601 4.89381 6.35602 4.79 6.46022L3 8.25022L7.09 12.3402" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                <h5 class="ms-4 mb-0 fw-medium text-white"><span class="d-block">Seamless</span><span>Integration</span></h5>
              </div>
              <p class="display-5 lh-lg text-light-light">Powered by state-of-the-art artificial intelligence, ensuring natural and meaningful</p>
            </div>
          </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3658

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute bottom-0 end-0" src="casper-assets/blur/blur-bottom-blue-right.svg" alt=""/><img class="position-absolute top-0 start-0" src="casper-assets/blur/blur-left-top-violet.svg" alt=""/>
  <div class="container position-relative">
    <div class="text-center mb-14"><span class="d-block mb-6 text-light-light">Type Caption Here</span>
      <h2 class="h3 font-heading fw-medium text-white mb-0">Recent Blog &amp; Articles</h2>
    </div>
    <div class="mw-sm mw-md-2xl mx-auto mw-lg-4xl">
      <div class="border-2 border-top border-light border-opacity-10 pt-8 mb-8">
        <div class="row align-items-center">
          <div class="col-12 col-md-3 mb-8 mb-md-0"><img class="img-fluid" src="casper-assets/blog/image-sm-blog1.png" alt=""/></div>
          <div class="col-12 col-md-6 ps-lg-0 mb-8 mb-md-0"><span class="d-block mb-5 text-light-light">Jul 20, 2022</span>
            <h5 class="text-white fw-medium mb-0">Consectures Dummy Content Velit officia consequat duis enim velit</h5>
          </div>
          <div class="col-12 col-md-3 col-lg-auto ms-auto">
            <div class="d-flex align-items-center"><a class="btn btn-outline-primary align-items-center justify-content-center p-0" href="#" style="width: 56px; height: 56px;">
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z" fill="white"></path>
                </svg></a><span class="ms-5 small text-white">Read more</span></div>
          </div>
        </div>
      </div>
      <div class="border-2 border-top border-light border-opacity-10 pt-8 mb-8">
        <div class="row align-items-center">
          <div class="col-12 col-md-3 mb-8 mb-md-0"><img class="img-fluid" src="casper-assets/blog/image-sm-blog2.png" alt=""/></div>
          <div class="col-12 col-md-6 ps-lg-0 mb-8 mb-md-0"><span class="d-block mb-5 text-light-light">Jul 20, 2022</span>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3659

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 start-0" src="casper-assets/blur/blur-left-top-violet.svg" alt=""/>
  <div class="container position-relative"><img class="d-none d-sm-block position-absolute top-0 end-0 animate-spinStar" src="casper-assets/content/blink-star.png" alt=""/>
    <div class="mb-16"><span class="d-block mb-4 text-info">BLOG CATEGORY</span>
      <h2 class="font-heading fw-medium text-white mb-0">Gorgeous UI Library</h2>
    </div>
    <div class="row">
      <div class="col-lg-6 mb-12 mb-lg-0"><img class="img-fluid d-block w-100 mb-10" src="casper-assets/content/image-robot.png" alt=""/>
        <div class="mb-n2"><a class="btn btn-secondary-dark mb-2 me-2 btn-sm rounded-pill text-white text-uppercase" href="#">Branding</a><a class="btn btn-secondary-dark mb-2 me-2 btn-sm rounded-pill text-white text-uppercase" href="#">ILLUSTRATION</a><a class="btn btn-secondary-dark mb-2 btn-sm rounded-pill text-white text-uppercase" href="#">LANDING PAGE</a></div>
      </div>
      <div class="col-lg-6">
        <p class="display-4 text-white fw-medium mb-10">Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi.</p>
        <p class="fs-6 text-white mb-6">Pellentesque ipsum nulla in eget interdum a. Neque pellentesque pulvinar mauris pulvinar diam. Turpis aliquet pellentesque velit vitae nisi sed morbi ultrices sed. Egestas interdum elit integer nec pharetra eget blandit dolor purus. A sed nisi congue morbi fermentum blandit. Turpis pretium dignissim risus ultrices purus et amet netus nibh.</p>
        <p class="fs-6 text-white mb-10">Vestibulum est ante in congue a fusce nunc. At tristique donec nisi viverra vulputate blandit orci at lectus. Morbi cras urna congue ornare. Mi magna vestibulum tortor id nec tortor non. Enim orci lorem egestas sed morbi dui mauris etiam nulla. Euismod cursus viverra ut ac eu sit quam amet tempor. Id in suspendisse nam sit vitae ullamcorper mollis et ut.</p>
        <p class="fs-6 text-white mb-6">Pellentesque ipsum nulla in eget interdum a. Neque pellentesque pulvinar mauris pulvinar diam. Turpis aliquet pellentesque velit vitae nisi sed morbi ultrices sed. Egestas interdum elit integer nec pharetra eget blandit dolor purus. A sed nisi congue morbi fermentum blandit. Turpis pretium dignissim risus ultrices purus et amet netus nibh.</p>
        <p class="fs-6 text-white mb-0">Vestibulum est ante in congue a fusce nunc. At tristique donec nisi viverra vulputate blandit orci at lectus. Morbi cras urna congue ornare. Mi magna vestibulum tortor id nec tortor non. Enim orci lorem egestas sed morbi dui mauris etiam nulla. Euismod cursus viverra ut ac eu sit quam amet tempor. Id in suspendisse nam sit vitae ullamcorper mollis et ut.</p>
      </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 #3660

Bootstrap

Casper

<section class="pb-12 pt-28 pb-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/newsletter/bg-gradient.png" alt=""/>
  <div class="container position-relative"><img class="position-absolute top-0 start-0 ms-sm-8 mt-n28 mt-sm-n20 mt-lg-n10 mt-lg-0 animate-spinStar" src="casper-assets/newsletter/blink-star.png" alt=""/>
    <div class="mw-sm mw-md-xl mx-auto text-center mb-14">
      <h2 class="font-heading fw-medium mb-6">Stay up to Date</h2>
      <p class="mw-lg mx-auto fs-6 mb-0">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
    </div>
    <div class="mw-sm mw-md-md mx-auto">
      <label class="form-label" for="">Email</label>
      <div class="d-flex flex-column flex-sm-row mb-5 align-items-sm-end">
        <input class="form-control rounded-1 text-dark border-white bg-white bg-opacity-50" type="email" placeholder="pat@saturn.dev"/>
        <button class="flex-shrink-0 mt-4 mt-sm-0 ms-sm-3 btn btn-sm px-5 py-2 btn-primary text-black" type="submit"><span class="me-1">Submit</span>
          <svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.4199 6.62C18.3185 6.37565 18.1243 6.18147 17.8799 6.08C17.7597 6.02876 17.6306 6.00158 17.4999 6H7.49994C7.23472 6 6.98037 6.10536 6.79283 6.29289C6.6053 6.48043 6.49994 6.73478 6.49994 7C6.49994 7.26522 6.6053 7.51957 6.79283 7.70711C6.98037 7.89464 7.23472 8 7.49994 8H15.0899L6.78994 16.29C6.69621 16.383 6.62182 16.4936 6.57105 16.6154C6.52028 16.7373 6.49414 16.868 6.49414 17C6.49414 17.132 6.52028 17.2627 6.57105 17.3846C6.62182 17.5064 6.69621 17.617 6.78994 17.71C6.8829 17.8037 6.9935 17.8781 7.11536 17.9289C7.23722 17.9797 7.36793 18.0058 7.49994 18.0058C7.63195 18.0058 7.76266 17.9797 7.88452 17.9289C8.00638 17.8781 8.11698 17.8037 8.20994 17.71L16.4999 9.41V17C16.4999 17.2652 16.6053 17.5196 16.7928 17.7071C16.9804 17.8946 17.2347 18 17.4999 18C17.7652 18 18.0195 17.8946 18.207 17.7071C18.3946 17.5196 18.4999 17.2652 18.4999 17V7C18.4984 6.86932 18.4712 6.74022 18.4199 6.62Z" fill="black"></path>
          </svg>
        </button>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value=""/>
        <label class="form-check-label ms-2"><span>I agree with</span><a class="d-inline-block fw-medium text-info-dark" href="#">Privacy Policy</a><span>and</span><a class="d-inline-block fw-medium text-info-dark" href="#">Terms of Conditions</a></label>
      </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 #3641

Get the code for 13,400+ components

Bootstrap Component #3642

Get the code for 13,400+ components

Bootstrap Component #3643

Get the code for 13,400+ components

Bootstrap Component #3644

Get the code for 13,400+ components

Bootstrap Component #3645

Get the code for 13,400+ components

Bootstrap Component #3646

Get the code for 13,400+ components

Bootstrap Component #3647

Get the code for 13,400+ components

Bootstrap Component #3648

Get the code for 13,400+ components

Bootstrap Component #3649

Get the code for 13,400+ components

Bootstrap Component #3650

Get the code for 13,400+ components

Bootstrap Component #3651

Get the code for 13,400+ components

Bootstrap Component #3652

Get the code for 13,400+ components

Bootstrap Component #3653

Get the code for 13,400+ components

Bootstrap Component #3654

Get the code for 13,400+ components

Bootstrap Component #3655

Get the code for 13,400+ components

Bootstrap Component #3656

Get the code for 13,400+ components

Bootstrap Component #3657

Get the code for 13,400+ components

Bootstrap Component #3658

Get the code for 13,400+ components

Bootstrap Component #3659

Get the code for 13,400+ components

Bootstrap Component #3660

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