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

Bootstrap

Consulty

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="mw-sm mx-auto mw-sm-none">
      <div class="row">
        <div class="col-12 col-sm-6 col-lg-3 mb-8">
          <div class="d-flex flex-wrap gap-4">
            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none">
              <path d="M9.375 12.5L11.4583 14.5833L15.625 10.4167M21.875 12.5C21.875 17.6777 17.6777 21.875 12.5 21.875C7.32233 21.875 3.125 17.6777 3.125 12.5C3.125 7.32233 7.32233 3.125 12.5 3.125C17.6777 3.125 21.875 7.32233 21.875 12.5Z" stroke="#FF8A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <p class="mw-xs pe-4 mb-0"><span class="fw-semibold">Expert help</span><span>- will help you get the guideline to grow faster</span></p>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-8">
          <div class="d-flex flex-wrap gap-4">
            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none">
              <path d="M9.375 12.5L11.4583 14.5833L15.625 10.4167M21.875 12.5C21.875 17.6777 17.6777 21.875 12.5 21.875C7.32233 21.875 3.125 17.6777 3.125 12.5C3.125 7.32233 7.32233 3.125 12.5 3.125C17.6777 3.125 21.875 7.32233 21.875 12.5Z" stroke="#FF8A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <p class="mw-xs pe-4 mb-0"><span class="fw-semibold">Free consultation</span><span>- this call will share all the secrets of business</span></p>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-8">
          <div class="d-flex flex-wrap gap-4">
            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none">
              <path d="M9.375 12.5L11.4583 14.5833L15.625 10.4167M21.875 12.5C21.875 17.6777 17.6777 21.875 12.5 21.875C7.32233 21.875 3.125 17.6777 3.125 12.5C3.125 7.32233 7.32233 3.125 12.5 3.125C17.6777 3.125 21.875 7.32233 21.875 12.5Z" stroke="#FF8A0A" 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 #3182

Bootstrap

Consulty

<section class="py-12 py-lg-24 bg-dark overflow-hidden">
  <div class="container">
    <div class="mw-lg mx-auto mw-lg-none">
      <h1 class="text-white mb-16 mw-2xl">Transforming ideas into visual masterpieces</h1>
      <div class="row mb-32">
        <div class="col-12 col-lg-6 mb-8 mb-lg-0">
          <div class="mw-md">
            <p class="text-white fs-7 mb-2">Helped to grow brand awareness fast</p>
            <p class="text-light-dark fs-9 mb-8">Branding</p>
            <div class="position-relative mb-8"><img class="img-fluid d-block w-100 rounded-3" src="consulty-assets/work/picture9.png" alt="">
              <div class="position-absolute bottom-0 end-0 mb-1 me-1"><a class="btn p-0 btn-dark rounded-3 d-flex align-items-center justify-content-center" href="#" style="width: 64px; height: 64px;">
                  <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none">
                    <path d="M22.1667 17.5002L38.5 17.5002M38.5 17.5002L38.5 33.8335M38.5 17.5002L17.5 38.5001" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg></a></div>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-6">
          <div class="mw-lg ms-lg-auto">
            <p class="text-white fs-7 mb-2">Website conversion increased by 310%</p>
            <p class="text-light-dark fs-9 mb-8">Growth</p>
            <div class="position-relative mb-8"><img class="img-fluid d-block w-100 rounded-3" src="consulty-assets/work/picture10.png" alt="">
              <div class="position-absolute bottom-0 end-0 mb-1 me-1"><a class="btn p-0 btn-dark rounded-3 d-flex align-items-center justify-content-center" href="#" style="width: 64px; height: 64px;">
                  <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none">

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

Bootstrap

Consulty

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="mw-sm mw-md-4xl mx-auto">
      <div class="row mx-lg-n12">
        <div class="col-12 col-md-6 px-lg-12 mb-10 mb-md-0"><img class="img-fluid d-block w-100 rounded-3" style="max-height: 630px;" src="consulty-assets/team/picture12.png" alt=""></div>
        <div class="col-12 col-md-6 px-lg-12">
          <div class="d-flex flex-column justify-content-between gap-8 h-100">
            <h2 class="font-heading mw-sm">Message from Founder</h2>
            <div>
              <p class="fs-7 mb-5 fw-semibold mw-xs">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.</p>
              <p class="text-dark-light mw-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit velit risus sit sed massa. Vivamus vel lorem egestas.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3184

Bootstrap

Consulty

<section class="py-12 py-md-24">
  <div class="container">
    <div class="position-relative overflow-hidden rounded-3"><img class="position-absolute top-0 start-0" src="consulty-assets/contact/shape3.svg" alt=""><img class="position-absolute top-0 end-0" src="consulty-assets/contact/shape2.svg" alt="">
      <div class="p-8 p-md-12 p-lg-24 mw-md mx-auto mw-md-none position-relative">
        <p class="text-primary fw-semibold mb-6">👋 Say hello</p>
        <h1 class="font-heading mw-md mw-lg-lg mb-24 mb-lg-40" style="letter-spacing: -1.2px;">Want to connect with us?</h1>
        <div class="d-flex flex-wrap justify-content-between gap-8 gap-sm-12 mw-4xl">
          <div>
            <p class="fs-6 fw-medium mb-1">Monday-Friday</p>
            <p class="fs-6 fw-medium">8:00 am - 5:00 pm</p>
          </div>
          <div>
            <p class="fs-6 fw-medium text-opacity-50 text-black mb-1">Send us a mail</p>
            <p class="fs-6 fw-medium">hello@consulty.co</p>
          </div>
          <div>
            <p class="fs-6 fw-medium text-opacity-50 text-black mb-1">Call us directly</p>
            <p class="fs-6 fw-medium">305-596-5883</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3185

Bootstrap

Consulty

<section>
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container"><a class="navbar-brand" href="#"><img class="img-fluid" style="height: 24px;" src="consulty-assets/logos/consulty-logo2.svg" alt=""></a>
      <button class="d-lg-none navbar-burger border-0 bg-transparent" type="button" 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="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M5.19995 16H26.7999" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M5.19995 8.79999H26.7999" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse position-relative" id="nav01">
        <ul class="navbar-nav me-auto">
          <li class="nav-item"><a class="nav-link" href="#"><span>Products</span>
              <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.8479 6L8.18119 10.6667L3.51453 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></a></li>
          <li class="nav-item"><a class="nav-link" href="#">Case Studies</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Support</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Resources</a></li>
        </ul>
        <div class="d-flex align-items-center ms-5"><a class="btn btn-sm py-3 px-5 fw-semibold btn-dark border-light" href="#"><span class="me-2">Get A Free Consultation</span>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14 6.66667H7.33333C4.38781 6.66667 2 9.05449 2 12V13.3333M14 6.66667L10 10.6667M14 6.66667L10 2.66667" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></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 #3186

Bootstrap

Consulty

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row mx-xl-n10">
        <div class="col-12 col-lg-4 px-xl-10 pb-10 pb-lg-0 mb-10 mb-lg-0 position-relative">
          <div class="d-none d-lg-block position-absolute top-0 end-0 h-100 bg-light-light translate-middle-x" style="width: 1px;"></div>
          <div class="d-lg-none position-absolute bottom-0 start-0 w-100 bg-light-light translate-middle-y" style="height: 1px;"></div><img class="img-fluid d-block mb-8" src="consulty-assets/testimonials/quote-icon2.svg" alt="">
          <p class="fs-7 fw-semibold mb-8">Unexpected Result</p>
          <div class="d-inline-block bg-light px-5 mb-8" style="height: 1px;"></div>
          <p class="mb-6 mw-sm">It is a long established fact that a reader will be that the distracted by the readable content of a page when looking at its layout it is a long fact.</p>
          <div class="d-flex flex-wrap align-items-center gap-4"><img class="img-fluid" src="consulty-assets/testimonials/avatar2.png" alt="">
            <div>
              <p class="fs-7 fw-semibold mb-0">Willard Purnell</p>
              <p class="text-dark-light fs-9 mb-0">Founder, Bioplex</p>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-4 px-xl-10 pb-10 pb-lg-0 mb-10 mb-lg-0 position-relative">
          <div class="d-none d-lg-block position-absolute top-0 end-0 h-100 bg-light-light translate-middle-x" style="width: 1px;"></div>
          <div class="d-lg-none position-absolute bottom-0 start-0 w-100 bg-light-light translate-middle-y" style="height: 1px;"></div><img class="img-fluid d-block mb-8" src="consulty-assets/testimonials/quote-icon2.svg" alt="">
          <p class="fs-7 fw-semibold mb-8">Great Service!</p>
          <div class="d-inline-block bg-light px-5 mb-8" style="height: 1px;"></div>
          <p class="mb-6 mw-sm">It is a long established fact that a reader will be that the distracted by the readable content of a page when looking at its layout it is a long fact.</p>
          <div class="d-flex flex-wrap align-items-center gap-4"><img class="img-fluid" src="consulty-assets/testimonials/avatar3.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 #3187

Bootstrap

Consulty

<section class="py-12 py-lg-24">
  <div class="container">
    <h1 class="font-heading text-center mb-12" style="letter-spacing: -1.2px;">Questions &amp; answers</h1>
    <div class="bg-light-light rounded-3 p-8 p-md-16 mb-12 overflow-hidden">
      <div class="pb-8 border-bottom border-light mb-8">
        <div class="d-flex align-items-center justify-content-between gap-4">
          <p class="fs-7 fw-semibold mb-0">How does the free trial work?</p>
          <div class="flex-shrink-0 d-flex align-items-center justify-content-center text-dark bg-white rounded-pill" style="width: 35px; height: 35px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M12 8H4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
        </div>
        <div class="mw-md mw-lg-3xl mt-4">
          <p class="text-dark-light mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volutpat, tempor condimentum commodo tincidunt sit dictumst. Eu placerat to a arcu at sem vitae eros, purus nonprofit.</p>
        </div>
      </div>
      <div class="pb-8 border-bottom border-light mb-8">
        <div class="d-flex align-items-center justify-content-between gap-4">
          <p class="fs-7 fw-semibold mb-0">How is different from traditional software?</p>
          <div class="flex-shrink-0 d-flex align-items-center justify-content-center text-dark bg-white rounded-pill" style="width: 35px; height: 35px;">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 4V8M8 8V12M8 8H12M8 8L4 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3188

Bootstrap

Consulty

<section class="position-relative overflow-hidden" style="height: 300px;">
  <div class="position-absolute start-50 top-50 translate-middle w-100">
    <div class="bg-black py-6" style="rotate: -8deg; transform: scaleX(1.4);">
      <div class="d-flex align-items-center justify-content-center gap-3">
        <p class="flex-shrink-0 text-white fs-6 fw-medium mb-0 text-nowrap">GROWTH</p>
        <div class="flex-shrink-0 rounded-pill bg-primary" style="width: 18px; height: 18px;"></div>
        <p class="flex-shrink-0 text-white fs-6 fw-medium mb-0 text-nowrap">WEB DESIGN</p>
        <div class="flex-shrink-0 rounded-pill bg-primary" style="width: 18px; height: 18px;"></div>
        <p class="flex-shrink-0 text-white fs-6 fw-medium mb-0 text-nowrap">BETTER ROI</p>
        <div class="flex-shrink-0 rounded-pill bg-primary" style="width: 18px; height: 18px;"></div>
        <p class="flex-shrink-0 text-white fs-6 fw-medium mb-0 text-nowrap">BRAND DESIGN</p>
        <div class="flex-shrink-0 rounded-pill bg-primary" style="width: 18px; height: 18px;"></div>
        <p class="flex-shrink-0 text-white fs-6 fw-medium mb-0 text-nowrap">MARKETING ASSETS</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 #3189

Bootstrap

Consulty

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6 mb-12 mb-lg-0">
        <div class="mw-md mw-xl-xl">
          <p class="fs-4 fw-medium mb-0">There are many variations of passages of layout but the majority have suffered alteration in some form.</p>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="row">
          <div class="col-sm-6 mb-6">
            <div class="py-8 text-center bg-light-light bg-opacity-50 rounded-4">
              <h1>20+</h1><span class="text-dark-light">Years of experiences</span>
            </div>
          </div>
          <div class="col-sm-6 mb-6">
            <div class="py-8 text-center bg-light-light bg-opacity-50 rounded-4">
              <h1>240+</h1><span class="text-dark-light">Projects completed</span>
            </div>
          </div>
          <div class="col-12">
            <div class="py-8 text-center bg-light-light bg-opacity-50 rounded-4">
              <h1>100%</h1><span class="text-dark-light">Client satisfaction</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 #3190

Bootstrap

Consulty

<section class="py-12 py-md-24 pb-xl-32 pt-64 pt-md-72 pt-lg-96 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 start-50 mt-14 translate-middle-x" style="scale: 1.2;" src="consulty-assets/footer/consulty-studio.png" alt="">
  <div class="container position-relative">
    <div class="row">
      <div class="col-12 col-lg-4 mb-12 mb-lg-0">
        <div class="d-flex flex-column align-items-start justify-content-between gap-8"><img class="img-fluid d-block mb-12 mb-lg-24" src="consulty-assets/logos/consulty-logo3.svg" alt="">
          <p class="text-dark-light mw-sm mb-0">Consulty gives you the blocks &amp; components you need to create a truly professional website, landing page or admin panel for your SaaS.</p>
        </div>
      </div>
      <div class="col-12 col-lg-8">
        <div class="mw-2xl ms-lg-auto">
          <div class="row">
            <div class="col-12 col-sm-4 mb-8 mb-sm-0">
              <p class="text-dark-light fw-medium mb-6">Platform</p>
              <ul class="list-unstyled mb-0 d-flex flex-column gap-6">
                <li><a class="btn-link text-light" href="#">Services</a></li>
                <li><a class="btn-link text-light" href="#">Book A Call</a></li>
                <li><a class="btn-link text-light" href="#">Pricing</a></li>
                <li><a class="btn-link text-light" href="#">Products</a></li>
              </ul>
            </div>
            <div class="col-12 col-sm-4 mb-8 mb-sm-0">
              <p class="text-dark-light fw-medium mb-6">Company</p>
              <ul class="list-unstyled mb-0 d-flex flex-column gap-6">
                <li><a class="btn-link text-light" href="#">About</a></li>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3191

Bootstrap

Consulty

<section class="py-24 pb-md-44 pt-md-36 bg-dark position-relative overflow-hidden">
  <div class="container-fluid">
    <div class="mw-3xl mw-lg-8xl mx-auto">
      <div class="row align-items-center">
        <div class="col-12 col-lg-7 mb-20 mb-lg-0">
          <h1 class="font-heading text-white mw-lg mw-md-3xl mb-6" style="letter-spacing: -1.2px;">Grow your business with the help of Consulty experts.</h1>
          <p class="text-dark-light fs-7 mb-10">Grow faster with a website that helps you convert more customers.</p><a class="btn btn-light" href="#">Get A Free Consultation</a>
        </div>
        <div class="col-12 col-lg-5"><img class="img-fluid d-block mx-auto me-lg-0" src="consulty-assets/cta/offers.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 #3192

Bootstrap

Consulty

<section class="py-12 py-lg-24">
  <div class="container">
    <p class="text-dark-light fw-medium mb-4">Resources</p>
    <h1 class="font-heading mb-24 mw-lg mw-md-4xl" style="letter-spacing: -1.2px;">We’ve created the resources that help you thrive.</h1>
    <div class="position-relative">
      <div class="position-relative"><a class="btn w-100 text-start fw-normal p-0 pt-8 mb-8 border-0 border-top rounded-0" href="#">
          <div class="row align-items-center">
            <div class="col-12 col-lg-2 mb-4 mb-lg-0"><span class="fw-medium text-dark-light lh-1">[Podcast]</span></div>
            <div class="col-12 col-lg-5 mb-4 mb-lg-0"><span class="fs-5 fw-semibold lh-1">Where ideas become triumphs</span></div>
            <div class="col-12 col-lg-3 ms-lg-auto mb-6 mb-sm-0">
              <div class="d-flex align-items-center justify-content-lg-end"><span class="me-1 fw-semibold">Listen</span>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 3.33341L10.6667 8.00008L6 12.6667" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </div>
          </div></a><a class="btn w-100 text-start fw-normal p-0 pt-8 mb-8 border-0 border-top rounded-0" href="#">
          <div class="row align-items-center">
            <div class="col-12 col-lg-2 mb-4 mb-lg-0"><span class="fw-medium text-dark-light lh-1">[Podcast]</span></div>
            <div class="col-12 col-lg-5 mb-4 mb-lg-0"><span class="fs-5 fw-semibold lh-1">Blueprinting success stories</span></div>
            <div class="col-12 col-lg-3 ms-lg-auto mb-6 mb-sm-0">
              <div class="d-flex align-items-center justify-content-lg-end"><span class="me-1 fw-semibold">Listen</span>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 3.33341L10.6667 8.00008L6 12.6667" stroke="black" stroke-width="1.5" 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 #3193

Bootstrap

Consulty

<section class="position-relative overflow-hidden pt-32 pb-80 pb-sm-52 pb-lg-40">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6">
        <div class="row mx-n1">
          <div class="col-8 px-1"><img class="d-block w-100 img-fluid" style="max-height: 496px; object-fit: contain;" src="consulty-assets/about/picture2.png" alt=""></div>
          <div class="col-4 px-1 mt-48"><img class="d-block w-100 img-fluid" style="max-height: 430px; object-fit: cover;" src="consulty-assets/about/picture3.png" alt=""></div>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="mw-lg ms-lg-auto">
          <p class="mb-4">Add Simple Subtitle</p>
          <h1 class="font-heading" style="letter-spacing: -1.2px;">Sculpting success one idea at a time</h1>
          <p class="text-dark-light fs-7 mb-32">It is a long established fact that a reader will be content distracted by the readable content.</p>
          <p class="fw-medium mb-4">MON-FRI: 9 AM - 6PM</p>
          <p class="fw-medium mb-8">SATURDAY: 9 AM - 5PM</p><a class="btn btn-dark" href="#">About Us</a>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3194

Bootstrap

Consulty

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <div class="container position-relative">
    <p class="text-center fs-6 fw-medium mb-16">Trusted by 2400+ brands &amp; companies worldwide</p>
    <div class="d-flex align-items-center justify-content-center gap-4">
      <div class="bg-light-light rounded-2 px-10 py-6 d-flex align-items-center justify-center flex-shrink-0" style="height: 100px; min-width: 270px;"><img class="img-fluid d-block" src="consulty-assets/logos/logoipsum5.svg" alt=""></div>
      <div class="bg-light-light rounded-2 px-10 py-6 d-flex align-items-center justify-center flex-shrink-0" style="height: 100px; min-width: 270px;"><img class="img-fluid d-block" src="consulty-assets/logos/logoipsum4.svg" alt=""></div>
      <div class="bg-light-light rounded-2 px-10 py-6 d-flex align-items-center justify-center flex-shrink-0" style="height: 100px; min-width: 270px;"><img class="img-fluid d-block" src="consulty-assets/logos/logoipsum1.svg" alt=""></div>
      <div class="bg-light-light rounded-2 px-10 py-6 d-flex align-items-center justify-center flex-shrink-0" style="height: 100px; min-width: 270px;"><img class="img-fluid d-block" src="consulty-assets/logos/logoipsum2.svg" alt=""></div>
      <div class="bg-light-light rounded-2 px-10 py-6 d-flex align-items-center justify-center flex-shrink-0" style="height: 100px; min-width: 270px;"><img class="img-fluid d-block" src="consulty-assets/logos/logoipsum3.svg" alt=""></div>
      <div class="bg-light-light rounded-2 px-10 py-6 d-flex align-items-center justify-center flex-shrink-0" style="height: 100px; min-width: 270px;"><img class="img-fluid d-block" src="consulty-assets/logos/logoipsum5.svg" alt=""></div>
      <div class="bg-light-light rounded-2 px-10 py-6 d-flex align-items-center justify-center flex-shrink-0" style="height: 100px; min-width: 270px;"><img class="img-fluid d-block" src="consulty-assets/logos/logoipsum4.svg" alt=""></div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3195

Bootstrap

Consulty

<section class="py-12 py-lg-24 bg-light-light">
  <div class="container">
    <div class="row">
      <div class="col-12 col-xl-5 mb-16 mb-xl-0">
        <div class="mw-lg mx-auto mx-xl-0">
          <p class="text-warning fw-medium mb-6">Say hello to Shuffle</p>
          <h1 class="font-heading mb-6" style="letter-spacing: -1.2px;">Pricing that scale with business</h1>
          <p class="text-dark-light fs-7 mw-md mb-28">Consulty gives you the blocks &amp; components you need to create a truly professional website, landing page or admin panel for your SaaS.</p>
          <div class="w-100 bg-light mb-14" style="height: 1px;"></div>
          <p class="fs-7 fw-semibold mb-2">Trusted by 50k+ customers</p>
          <div class="d-flex align-items-center gap-2 flex-wrap">
            <div class="d-flex align-items-cener">
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
                <path d="M9.70706 4.21267C10.0282 3.22436 11.4264 3.22436 11.7475 4.21267L12.8949 7.74387C13.0385 8.18586 13.4504 8.48511 13.9151 8.48511H17.628C18.6672 8.48511 19.0993 9.81488 18.2585 10.4257L15.2547 12.6081C14.8787 12.8813 14.7214 13.3654 14.865 13.8074L16.0124 17.3386C16.3335 18.327 15.2023 19.1488 14.3616 18.538L11.3578 16.3556C10.9818 16.0824 10.4727 16.0824 10.0967 16.3556L7.09293 18.538C6.25222 19.1488 5.12105 18.327 5.44217 17.3386L6.58953 13.8074C6.73314 13.3654 6.57581 12.8813 6.19984 12.6081L3.19602 10.4257C2.35531 9.81488 2.78738 8.48511 3.82655 8.48511H7.53948C8.00421 8.48511 8.41609 8.18586 8.5597 7.74387L9.70706 4.21267Z" fill="#FF8A0A"></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
                <path d="M9.70706 4.21267C10.0282 3.22436 11.4264 3.22436 11.7475 4.21267L12.8949 7.74387C13.0385 8.18586 13.4504 8.48511 13.9151 8.48511H17.628C18.6672 8.48511 19.0993 9.81488 18.2585 10.4257L15.2547 12.6081C14.8787 12.8813 14.7214 13.3654 14.865 13.8074L16.0124 17.3386C16.3335 18.327 15.2023 19.1488 14.3616 18.538L11.3578 16.3556C10.9818 16.0824 10.4727 16.0824 10.0967 16.3556L7.09293 18.538C6.25222 19.1488 5.12105 18.327 5.44217 17.3386L6.58953 13.8074C6.73314 13.3654 6.57581 12.8813 6.19984 12.6081L3.19602 10.4257C2.35531 9.81488 2.78738 8.48511 3.82655 8.48511H7.53948C8.00421 8.48511 8.41609 8.18586 8.5597 7.74387L9.70706 4.21267Z" fill="#FF8A0A"></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
                <path d="M9.70706 4.21267C10.0282 3.22436 11.4264 3.22436 11.7475 4.21267L12.8949 7.74387C13.0385 8.18586 13.4504 8.48511 13.9151 8.48511H17.628C18.6672 8.48511 19.0993 9.81488 18.2585 10.4257L15.2547 12.6081C14.8787 12.8813 14.7214 13.3654 14.865 13.8074L16.0124 17.3386C16.3335 18.327 15.2023 19.1488 14.3616 18.538L11.3578 16.3556C10.9818 16.0824 10.4727 16.0824 10.0967 16.3556L7.09293 18.538C6.25222 19.1488 5.12105 18.327 5.44217 17.3386L6.58953 13.8074C6.73314 13.3654 6.57581 12.8813 6.19984 12.6081L3.19602 10.4257C2.35531 9.81488 2.78738 8.48511 3.82655 8.48511H7.53948C8.00421 8.48511 8.41609 8.18586 8.5597 7.74387L9.70706 4.21267Z" fill="#FF8A0A"></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
                <path d="M9.70706 4.21267C10.0282 3.22436 11.4264 3.22436 11.7475 4.21267L12.8949 7.74387C13.0385 8.18586 13.4504 8.48511 13.9151 8.48511H17.628C18.6672 8.48511 19.0993 9.81488 18.2585 10.4257L15.2547 12.6081C14.8787 12.8813 14.7214 13.3654 14.865 13.8074L16.0124 17.3386C16.3335 18.327 15.2023 19.1488 14.3616 18.538L11.3578 16.3556C10.9818 16.0824 10.4727 16.0824 10.0967 16.3556L7.09293 18.538C6.25222 19.1488 5.12105 18.327 5.44217 17.3386L6.58953 13.8074C6.73314 13.3654 6.57581 12.8813 6.19984 12.6081L3.19602 10.4257C2.35531 9.81488 2.78738 8.48511 3.82655 8.48511H7.53948C8.00421 8.48511 8.41609 8.18586 8.5597 7.74387L9.70706 4.21267Z" fill="#FF8A0A"></path>
              </svg>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3196

Bootstrap

Consulty

<section class="position-relative overflow-hidden pt-24">
  <div class="container">
    <p class="mb-4">About Us</p>
    <div class="row mb-20">
      <div class="col-12 col-lg-6 mb-6 mb-lg-0">
        <h1 class="font-heading mw-xl mb-0" style="letter-spacing: -1.2px;">Ideas take flight, success takes root</h1>
      </div>
      <div class="col-12 col-lg-6">
        <div class="mw-xl ms-lg-auto">
          <p class="fs-7 fw-medium mb-4">Established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using is that it has distribution.</p>
          <p class="text-dark-light fs-7 mb-8">It is a long established fact that a reader will be content distracted by the readable content.</p><a class="btn p-0 fw-semibold d-flex align-items-center" href="#"><span class="me-1">Read More</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
              <path d="M6 3.83341L10.6667 8.50008L6 13.1667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a>
        </div>
      </div>
    </div>
    <div class="position-relative">
      <div class="position-absolute start-0 top-0 w-100 mt-n12 mt-lg-n24 ms-40 ms-xl-80" style="z-index: 1;"><img class="img-fluid" style="height: 200px;" src="consulty-assets/about/arrow-circle.svg" alt=""></div>
      <div class="d-flex align-items-center justify-content-center gap-12">
        <div class="flex-shrink-0"><img class="img-fluid rounded-4" style="width:259px; height:270px;" src="consulty-assets/about/picture4.png" alt=""></div>
        <div class="flex-shrink-0"><img class="img-fluid rounded-4" style="width:319px; height:388px;" src="consulty-assets/about/picture5.png" alt=""></div>
        <div class="flex-shrink-0"><img class="img-fluid rounded-4" style="width:339px; height:253px;" src="consulty-assets/about/picture6.png" alt=""></div>
        <div class="flex-shrink-0"><img class="img-fluid rounded-4" style="width:319px; height:337px;" src="consulty-assets/about/picture7.png" alt=""></div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3197

Bootstrap

Consulty

<section class="py-12 py-lg-24">
  <div class="container mb-16">
    <h1 class="font-heading text-center mb-4" style="letter-spacing: -1.2px;">4950+ Satisfied Customers</h1>
    <p class="fs-7 text-dark-light text-center mw-lg mx-auto mb-0">We consider all the drivers of change gives you the blocks &amp; you need professional website.</p>
  </div>
  <div class="overflow-hidden">
    <div class="d-flex mx-lg-n5 justify-content-center">
      <div class="flex-shrink-0 w-100 mw-sm mw-lg-xl px-2 px-lg-5 overflow-hidden">
        <div class="px-6 px-sm-10 p-10 rounded-3 bg-light-light d-flex flex-column flex-shrink-0 h-100" style="min-height: 420px;">
          <p class="fs-6 mw-md mb-auto">“In the new era of technology we look in the future with certainty pride for our company and business. consider all the driver financial change gives you the block.”</p>
          <div class="d-flex flex-wrap align-items-center gap-4"><img class="img-fluid" style="width: 55px;" src="consulty-assets/testimonials/avatar5.png" alt="">
            <div>
              <p class="fs-7 fw-semibold mb-0">Amanda Seyfried</p>
              <p class="text-dark-light fs-9 mb-0">Sales &amp; Marketing, Alien Ltd.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-shrink-0 w-100 mw-sm mw-lg-xl px-2 px-lg-5 overflow-hidden">
        <div class="px-6 px-sm-10 p-10 rounded-3 bg-primary-light bg-opacity-50 d-flex flex-column flex-shrink-0 h-100" style="min-height: 420px;">
          <p class="fs-6 mw-md mb-auto">“In the new era of technology we look in the future with certainty pride for our company and business. consider all the driver financial change gives you the block.”</p>
          <div class="d-flex flex-wrap align-items-center gap-4"><img class="img-fluid" style="width: 55px;" src="consulty-assets/testimonials/avatar6.png" alt="">
            <div>
              <p class="fs-7 fw-semibold mb-0">Amanda Seyfried</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 #3198

Bootstrap

Consulty

<section class="py-12 py-lg-24">
  <div class="container">
    <h1 class="font-heading text-center mb-12" style="letter-spacing: -1.2px;">Got any question?</h1>
    <div class="row mb-n8">
      <div class="col-12 col-sm-6 mb-8">
        <div class="mw-lg mx-auto">
          <p class="fs-7 fw-semibold mb-4">Is it really unlimited downloads?</p>
          <p class="text-dark-light mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
        </div>
      </div>
      <div class="col-12 col-sm-6 mb-8">
        <div class="mw-lg mx-auto">
          <p class="fs-7 fw-semibold mb-4">Is it really unlimited downloads?</p>
          <p class="text-dark-light mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
        </div>
      </div>
      <div class="col-12 col-sm-6 mb-8">
        <div class="mw-lg mx-auto">
          <p class="fs-7 fw-semibold mb-4">Is it really unlimited downloads?</p>
          <p class="text-dark-light mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
        </div>
      </div>
      <div class="col-12 col-sm-6 mb-8">
        <div class="mw-lg 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 #3199

Bootstrap

Consulty

<section class="position-relative overflow-hidden" style="height: 600px;">
  <div class="position-absolute start-50 top-50 translate-middle w-100">
    <div class="bg-black py-6 my-n24 mt-lg-n12" style="rotate: -6deg; transform: scaleX(1.4);">
      <div class="d-flex align-items-center justify-content-center gap-3">
        <p class="text-white fs-5 mb-0 fw-medium text-nowrap">WEB DESIGN</p>
        <div class="flex-shrink-0 rounded-pill bg-primary" style="width: 18px; height: 18px;"></div>
        <p class="text-white fs-5 mb-0 fw-medium text-nowrap">UI/UX DESIGN</p>
        <div class="flex-shrink-0 rounded-pill bg-primary" style="width: 18px; height: 18px;"></div>
        <p class="text-white fs-5 mb-0 fw-medium text-nowrap">WEB DESIGN</p>
        <div class="flex-shrink-0 rounded-pill bg-primary" style="width: 18px; height: 18px;"></div>
        <p class="text-white fs-5 mb-0 fw-medium text-nowrap">BRAND DESIGN</p>
        <div class="flex-shrink-0 rounded-pill bg-primary" style="width: 18px; height: 18px;"></div>
        <p class="text-white fs-5 mb-0 fw-medium text-nowrap">UI/UX DESIGN</p>
      </div>
    </div>
    <div class="bg-primary py-6 my-n24 mt-lg-n12" style="rotate: 6deg; transform: scaleX(1.4);">
      <div class="d-flex align-items-center justify-content-center gap-3">
        <p class="text-white fs-6 mb-0 fw-medium text-nowrap">WEB DESIGN</p>
        <div class="flex-shrink-0 rounded-pill bg-white" style="width: 18px; height: 18px;"></div>
        <p class="text-white fs-6 mb-0 fw-medium text-nowrap">UI/UX DESIGN</p>
        <div class="flex-shrink-0 rounded-pill bg-white" style="width: 18px; height: 18px;"></div>
        <p class="text-white fs-6 mb-0 fw-medium text-nowrap">WEB DESIGN</p>
        <div class="flex-shrink-0 rounded-pill bg-white" style="width: 18px; height: 18px;"></div>
        <p class="text-white fs-6 mb-0 fw-medium text-nowrap">BRAND DESIGN</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 #3200

Bootstrap

Consulty

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="mw-lg mx-auto mw-lg-none bg-black rounded-3 p-8 p-md-12 p-lg-24">
      <div class="row">
        <div class="col-12 col-lg-5 mb-10 mb-lg-0">
          <div class="bg-white rounded-3 overflow-hidden position-relative p-12"><img class="position-absolute top-0 end-0" src="consulty-assets/contact/shape4.svg" alt=""><img class="img-fluid mb-5" src="consulty-assets/contact/message-icon.svg" alt="">
            <h5 class="font-heading mb-4">Live chat support</h5>
            <p class="text-dark-light mb-8 mw-sm">Have questions or need a hand? We're here to help. Reach our friendly (real human), creator-obsessed support team via live chat or email.</p>
            <div class="d-flex gap-2 mb-8"><img class="flex-shrink-0 img-fluid" src="consulty-assets/contact/avatar1.png" alt=""><img class="flex-shrink-0 img-fluid" src="consulty-assets/contact/avatar2.png" alt=""><img class="flex-shrink-0 img-fluid" src="consulty-assets/contact/avatar3.png" alt=""><img class="flex-shrink-0 img-fluid" src="consulty-assets/contact/avatar4.png" alt=""><img class="flex-shrink-0 img-fluid" src="consulty-assets/contact/avatar5.png" alt=""><img class="flex-shrink-0 img-fluid" src="consulty-assets/contact/avatar6.png" alt=""><img class="flex-shrink-0 img-fluid" src="consulty-assets/contact/avatar7.png" alt=""><img class="flex-shrink-0 img-fluid" src="consulty-assets/contact/avatar8.png" alt=""></div><a class="btn p-0 d-inline-flex fw-semibold align-items-center border-0" href="#"><span class="me-2 lh-1">Start chatting now</span>
              <div class="text-gray-900 group-hover:text-gray-800 transition duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                  <path d="M4.99996 10H15.4166M15.4166 10L10.4166 5M15.4166 10L10.4166 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div></a>
          </div>
        </div>
        <div class="col-12 col-lg-7 align-self-end">
          <div class="mw-sm mw-xl-lg pe-xl-6 ms-lg-auto">
            <h6 class="font-heading text-white fw-normal mb-6">“It is a long established fact that a reader will be that the distracted by the readable content of a page when looking at its layout it is a long fact.”</h6>
            <p class="text-white fw-semibold">Willard Purnell</p>
            <p class="text-dark-light fs-9 mb-0">Founder, Bioplex</p>
          </div>
        </div>
      </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Get the code for 13,400+ components

Bootstrap Component #3182

Get the code for 13,400+ components

Bootstrap Component #3183

Get the code for 13,400+ components

Bootstrap Component #3184

Get the code for 13,400+ components

Bootstrap Component #3185

Get the code for 13,400+ components

Bootstrap Component #3186

Get the code for 13,400+ components

Bootstrap Component #3187

Get the code for 13,400+ components

Bootstrap Component #3188

Get the code for 13,400+ components

Bootstrap Component #3189

Get the code for 13,400+ components

Bootstrap Component #3190

Get the code for 13,400+ components

Bootstrap Component #3191

Get the code for 13,400+ components

Bootstrap Component #3192

Get the code for 13,400+ components

Bootstrap Component #3193

Get the code for 13,400+ components

Bootstrap Component #3194

Get the code for 13,400+ components

Bootstrap Component #3195

Get the code for 13,400+ components

Bootstrap Component #3196

Get the code for 13,400+ components

Bootstrap Component #3197

Get the code for 13,400+ components

Bootstrap Component #3198

Get the code for 13,400+ components

Bootstrap Component #3199

Get the code for 13,400+ components

Bootstrap Component #3200

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