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

Bootstrap

Gradia

<section class="position-relative pt-32 pb-28 bg-black overflow-hidden"><img class="position-absolute top-0 start-0" src="gradia-assets/elements/contact/radial3.svg" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <div class="row g-16">
      <div class="col-12 col-md-6">
        <div class="mw-md-lg">
          <h2 class="fs-6 fw-semibold text-white lh-sm mb-7" >Want to get in touch with us?</h2>
          <p class="text-secondary-light mw-md-sm mb-0" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="mw-md-md ms-auto">
          <h2 class="d-inline-block fs-17 fw-semibold mb-4" style="background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">Send us a mail</h2>
          <p class="fs-15 text-white mb-16" >hello@gradia.io</p>
          <h2 class="d-inline-block fs-17 fw-semibold mb-4" style="background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">Follow us</h2>
          <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link fs-15 fw-normal text-white" href="#" >Facebook</a></li>
            <li class="nav-item"><a class="nav-link fs-15 fw-normal text-white" href="#" >Twitter</a></li>
            <li class="nav-item"><a class="nav-link fs-15 fw-normal text-white" href="#" >Linkedin</a></li>
            <li class="nav-item"><a class="nav-link fs-15 fw-normal text-white" href="#" >Instagram</a></li>
            <li class="nav-item"><a class="nav-link fs-15 fw-normal text-white" href="#" >Pinterest</a></li>
          </ul>
        </div>
      </div>
    </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #262

Bootstrap

Gradia

<section>
  <nav class="navbar navbar-dark navbar-expand-lg bg-white py-5 py-lg-3 px-5"  >
    <div class="container-fluid"><a class="navbar-brand" href="#"><img class="img-fluid" src="gradia-assets/logos/gradia-name-black.svg" alt=""/></a>
      <div class="collapse navbar-collapse me-5 justify-content-end">
        <ul class="navbar-nav">
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-secondary mb-0" >Features</h3></a></li>
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-secondary mb-0" >Solutions</h3></a></li>
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-secondary mb-0" >Features</h3></a></li>
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-secondary mb-0" >Pricing</h3></a></li>
        </ul>
      </div>
      <div class="d-none d-lg-block">
        <div class="rounded-3" style="padding:2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)">
          <button class="btn btn-light px-4 py-3 rounded-1" type="button">
            <h4 class="fs-17 fw-medium text-secondary mb-0" >Start Free Trial</h4>
          </button>
        </div>
      </div>
      <div class="d-lg-none">
        <button class="btn navbar-burger p-0">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #263

Bootstrap

Gradia

<section class="pt-36 bg-light-light overflow-hidden">
  <div class="container">
    <div class="row g-16">
      <div class="col-12 col-md-6">
        <div class="mw-md-xl">
          <h2 class="fs-10 lh-sm mb-6" >Get our mobile app to make the process faster.</h2>
          <p class="fs-17 text-muted mb-16" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar id fames nunc. Turpis leo turpis non, id ut nunc.</p>
          <div class="row g-5">
            <div class="col-auto"><a href="#"><img src="gradia-assets/logos/brands/app-store2.png" alt=""/></a></div>
            <div class="col-auto"><a href="#"><img src="gradia-assets/logos/brands/app-store2.png" alt=""/></a></div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="d-flex justify-content-center"><img class="img-fluid self-end" src="gradia-assets/images/applications/mobile.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 #264

Bootstrap

Gradia

<section class="position-relative pt-36 lg:pb-14 bg-secondary overflow-hidden"><img class="position-absolute top-0 start-50 translate-middle-x" src="gradia-assets/elements/cta/radial.png" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <div class="row mb-12">
      <div class="col-12 col-xl-6">
        <div class="mw-xl-xl">
          <h1 class="fs-10 mb-6 text-white lh-sm" >Get maximum results from all projects.</h1>
          <p class="fs-17 text-white mb-20" >Amet minim mollit non deserunt ullamco est sit aliqua.</p>
          <button class="btn btn-primary text-uppercase px-6 mb-11" type="button" style="letter-spacing: 1px;" >Connect Now</button>
          <ul class="list-group-flush p-0 m-n2">
            <li class="d-inline-flex align-items-center p-2 fw-semibold list-group-item bg-transparent text-white border-0">
              <svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="11" cy="11" r="11" fill="#3F3F46"></circle>
                <path d="M6.7959 11.6006L9.1982 14.0029L15.2039 7.99713" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0" >No hidden fees</p>
            </li>
            <li class="d-inline-flex align-items-center p-2 fw-semibold list-group-item bg-transparent text-white border-0">
              <svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="11" cy="11" r="11" fill="#3F3F46"></circle>
                <path d="M6.7959 11.6006L9.1982 14.0029L15.2039 7.99713" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0" >Start with a free account</p>
            </li>
            <li class="d-inline-flex align-items-center p-2 fw-semibold list-group-item bg-transparent text-white border-0">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #265

Bootstrap

Gradia

<section class="pt-24 pb-32 bg-white overflow-hidden">
  <div class="container">
    <h2 class="fs-7 mb-20" >Available positions</h2>
    <h3 class="fs-15 fw-medium mb-7" >Development</h3>
    <div class="row mb-12 g-6">
      <div class="col-12 col-md-4"><a href="#">
          <div class="h-100 p-6 border rounded-1">
            <h3 class="fs-20 fw-semibold text-dark text-uppercase mb-7" style="letter-spacing: 1px;" >London, UK</h3>
            <h3 class="fs-17 fw-semibold mb-2" >Software Tester</h3>
            <p class="text-muted mb-0" >Full Time</p>
          </div></a></div>
      <div class="col-12 col-md-4"><a href="#">
          <div class="h-100 p-6 border rounded-1">
            <h3 class="fs-20 fw-semibold text-dark text-uppercase mb-7" style="letter-spacing: 1px;" >Remote</h3>
            <h3 class="fs-17 fw-semibold mb-2" >Senior Software Developer</h3>
            <p class="text-muted mb-0" >Full Time</p>
          </div></a></div>
      <div class="col-12 col-md-4"><a href="#">
          <div class="h-100 p-6 border rounded-1">
            <h3 class="fs-20 fw-semibold text-dark text-uppercase mb-7" style="letter-spacing: 1px;" >London, UK</h3>
            <h3 class="fs-17 fw-semibold mb-2" >Product Manager</h3>
            <p class="text-muted mb-0" >Full Time</p>
          </div></a></div>
      <div class="col-12 col-md-4"><a href="#">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #266

Bootstrap

Gradia

<section class="pt-24 pb-36 bg-white overflow-hidden">
  <div class="container">
    <h2 class="fs-10 fw-semibold text-center mb-14" >Frequently asked question</h2>
    <div class="mw-md-2xl mx-auto" style="padding: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)">
      <div class="bg-white">
        <div class="row">
          <div class="col-12"><a class="block" href="#">
              <div class="py-4 px-5">
                <div class="row align-items-center justify-content-between">
                  <div class="col-auto">
                    <h3 class="fs-17 fw-semibold mb-0" >Is it really unlimited downloads?</h3>
                  </div>
                  <div class="col-auto">
                    <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10.5 3.75L15.75 9M15.75 9L10.5 14.25M15.75 9L2.25 9" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </div>
              <div style="padding-bottom: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)"></div></a></div>
          <div class="col-12"><a href="#">
              <div class="py-4 px-5">
                <div class="row align-items-center justify-content-between">
                  <div class="col-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 #267

Bootstrap

Gradia

<section class="pt-24 pb-36 bg-white overflow-hidden">
  <div class="container">
    <div class="mw-md-md mx-auto text-center mb-24">
      <h2 class="fs-10 fw-semibold text-secondary mb-5" >Our happy team</h2>
      <p class="text-muted" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    </div>
    <div class="container">
      <div class="row g-16">
        <div class="col-12 col-md-6">
          <div class="container">
            <div class="row g-7">
              <div class="col-auto"><img src="gradia-assets/images/teams/avatar1.png" alt=""/></div>
              <div class="col">
                <p class="fs-17 text-muted mb-6" >Lorem ipsum dolor sit amet, consec tetur adipis cing elit. Eleifend id vulpu tate amet nunc. Elit sagittis sollici tudin cursus aliquam quis dui. Ut curabitur morbi nunc sit leo tellus neque dolor. Amet sem egestas.</p>
                <h3 class="fs-17 mb-0" >Darrell Steward, CEO</h3>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="container">
            <div class="row g-7">
              <div class="col-auto"><img src="gradia-assets/images/teams/avatar2.png" alt=""/></div>
              <div class="col">

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

Bootstrap

Gradia

<section class="pt-28 pb-44 bg-white overflow-hidden">
  <div class="container">
    <div class="row align-items-center g-16">
      <div class="col-12 col-md-6">
        <div class="mw-xl">
          <h1 class="fs-10 mb-6 lh-sm" >Get maximum results from all your projects.</h1>
          <p class="mb-20 text-muted mw-md-md" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.</p>
          <ul class="list-group list-group-flush">
            <li class="d-flex align-items-center px-0 fw-bold list-group-item border-0 mb-1"><img class="me-3" src="gradia-assets/elements/features/check-green.svg" alt=""/>
              <h3 class="fs-17 fw-semibold mb-0" >No hidden fees</h3>
            </li>
            <li class="d-flex align-items-center px-0 fw-bold list-group-item border-0 mb-1"><img class="me-3" src="gradia-assets/elements/features/check-green.svg" alt=""/>
              <h3 class="fs-17 fw-semibold mb-0" >Start with a free account</h3>
            </li>
            <li class="d-flex align-items-center px-0 fw-bold list-group-item border-0"><img class="me-3" src="gradia-assets/elements/features/check-green.svg" alt=""/>
              <h3 class="fs-17 fw-semibold mb-0" >Edit online, no software needed</h3>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="p-6 bg-black mx-auto" style="background: linear-gradient(98.24deg, #FFB36D 0%, #EC5353 100%); max-width: 470px; height: 382px; border-radius: 25px;"><img class="img-fluid" src="gradia-assets/images/features/dropdown.png" alt=""/></div>
      </div>
    </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #269

Bootstrap

Gradia

<section class="pt-28 pb-32 bg-white overflow-hidden">
  <div class="container">
    <p class="fs-15 text-center text-secondary mb-5" >Best rated design tool in G2 and loved by world&rsquo;s best designers</p>
    <div class="row justify-content-center text-center">
      <div class="col-12 col-md-4 col-lg-auto p-10"><img class="img-fluid" src="gradia-assets/logos/brands/brand1.png" alt=""/></div>
      <div class="col-12 col-md-4 col-lg-auto p-10"><img class="img-fluid" src="gradia-assets/logos/brands/brand2.png" alt=""/></div>
      <div class="col-12 col-md-4 col-lg-auto p-10"><img class="img-fluid" src="gradia-assets/logos/brands/brand3.png" alt=""/></div>
      <div class="col-12 col-md-4 col-lg-auto p-10"><img class="img-fluid" src="gradia-assets/logos/brands/brand4.png" alt=""/></div>
      <div class="col-12 col-md-4 col-lg-auto p-10"><img class="img-fluid" src="gradia-assets/logos/brands/brand5.png" 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 #270

Bootstrap

Gradia

<section class="position-relative pt-20 pb-xl-32 bg-black overflow-hidden">
  <div class="container mb-16 mb-xl-0">
    <div class="row">
      <div class="col-12 col-xl-6">
        <h2 class="fs-10 text-white mb-16" >Three steps to get started</h2>
        <div class="row mb-12">
          <div class="col-auto">
            <div class="d-inline-block rounded-pill" style="width:50px; height:50px; padding: 1px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
              <div class="d-flex align-items-center justify-content-center bg-black w-100 h-100 rounded-pill">
                <h3 class="fs-16 fw-medium text-white mb-0" >1</h3>
              </div>
            </div>
          </div>
          <div class="col col-md-6">
            <h3 class="fs-16 fw-medium text-white mb-4" >Create A Free Account</h3>
            <p class="text-secondary-light mb-0" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
          </div>
        </div>
        <div class="row mb-12">
          <div class="col-auto">
            <div class="d-inline-block rounded-pill" style="width:50px; height:50px; padding: 1px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
              <div class="d-flex align-items-center justify-content-center bg-black w-100 h-100 rounded-pill">
                <h3 class="fs-16 fw-medium text-white mb-0" >2</h3>
              </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 #271

Bootstrap

Gradia

<section class="position-relative pt-32 pb-36 overflow-hidden" style="background: linear-gradient(98.24deg, #FFFFFF 0%, #F9F9FF 47.4%, #EBECF7 100%)"><img class="position-absolute top-50 start-0 translate-middle-y" src="gradia-assets/elements/sign-up/radial.svg" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <div class="row g-16">
      <div class="col-12 col-md-6">
        <div class="mw-md-lg">
          <h2 class="fs-10 mb-3" >Welcome back!</h2>
          <p class="fs-17 text-muted mb-12" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <form class="mw-md-xl">
          <div class="row mb-6 g-4">
            <div class="col-12">
              <div class="form-group">
                <input class="bg-white text-dark px-5 py-4 w-100 border rounded-1" id="signInInput1-1" style="border-radius: 3px;" type="email" placeholder="Email address"/>
              </div>
            </div>
            <div class="col-12">
              <div class="form-group">
                <input class="bg-white text-dark px-5 py-4 w-100 border rounded-1" id="signInInput1-2" style="border-radius: 3px;" type="password" placeholder="Password"/>
              </div>
            </div>
          </div>
          <div class="form-check mb-8">
            <input class="form-check-input" id="signInInput1-3" type="checkbox" value=""/>
            <label class="fs-19 text-secondary form-check-label" for="flexCheckDefault" >Remember me</label>

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

Bootstrap

Gradia

<section class="position-relative bg-light-light overflow-hidden">
  <div class="container mb-16 mb-xl-0">
    <div class="row">
      <div class="col-12 col-xl-6">
        <div class="mw-md-lg pt-20 pb-xl-20">
          <h2 class="fs-7 lh-sm mb-6" >Try our app</h2>
          <p class="fs-17 text-muted mb-16" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
          <div class="row g-4 mb-6">
            <div class="col-auto"><img src="gradia-assets/elements/applications/check.svg" alt=""/></div>
            <div class="col">
              <h3 class="fs-17 mb-3" >Control Everything Easily</h3>
              <p class="text-muted" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint velit officia.</p>
            </div>
          </div>
          <div class="row g-4 mb-14">
            <div class="col-auto"><img src="gradia-assets/elements/applications/check.svg" alt=""/></div>
            <div class="col">
              <h3 class="fs-17 mb-3" >Build Your Team</h3>
              <p class="text-muted" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint velit officia.</p>
            </div>
          </div>
          <div class="row g-5">
            <div class="col-auto"><a href="#"><img src="gradia-assets/logos/brands/app-store-rounded2.png" alt=""/></a></div>
            <div class="col-auto"><a href="#"><img src="gradia-assets/logos/brands/play-store-rounded2.png" alt=""/></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 #273

Bootstrap

Gradia

<section class="pt-20 pb-32 bg-white overflow-hidden">
  <div class="container">
    <div class="text-center mw-lg mx-auto mb-20">
      <h2 class="fs-10 fw-semibold mb-4" >Latest news</h2>
      <p class="fs-17 text-dark" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
    </div>
    <div class="mw-7xl mx-auto">
      <div class="row g-16">
        <div class="col-12 col-md-4"><a href="#">
            <div class="position-relative"><img class="w-100 mb-5 rounded-3" src="gradia-assets/images/blog/blog-horizontal1.png" alt=""/>
              <h3 class="fs-17 fw-semibold lh-sm mb-4" >You will never believe these bizarre truth of travel.</h3><span class="d-inline-block fs-20 fw-semibold text-dark text-uppercase" style="letter-spacing: 1px" >Technology  .  4 min read</span>
            </div></a></div>
        <div class="col-12 col-md-4"><a href="#">
            <div class="position-relative"><img class="w-100 mb-5 rounded-3" src="gradia-assets/images/blog/blog-horizontal2.png" alt=""/>
              <h3 class="fs-17 fw-semibold lh-sm mb-4" >You will never believe these bizarre truth of travel.</h3><span class="d-inline-block fs-20 fw-semibold text-dark text-uppercase" style="letter-spacing: 1px" >Technology  .  4 min read</span>
            </div></a></div>
        <div class="col-12 col-md-4"><a href="#">
            <div class="position-relative"><img class="w-100 mb-5 rounded-3" src="gradia-assets/images/blog/blog-horizontal3.png" alt=""/>
              <h3 class="fs-17 fw-semibold lh-sm mb-4" >You will never believe these bizarre truth of travel.</h3><span class="d-inline-block fs-20 fw-semibold text-dark text-uppercase" style="letter-spacing: 1px" >Technology  .  4 min read</span>
            </div></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 #274

Bootstrap

Gradia

<section class="pt-32 pb-36 overflow-hidden" style="background: linear-gradient(98.24deg, #FFFFFF 0%, #F9F9FF 47.4%, #EBECF7 100%);">
  <div class="container">
    <div class="row g-16">
      <div class="col-12 col-md-6">
        <div class="d-flex flex-column justify-content-between mw-md-md h-100">
          <div>
            <h2 class="fs-10 fw-semibold lh-sm mb-5" >Got questions? We&rsquo;re here to help!</h2>
            <p class="text-muted mb-0" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
          </div>
          <div><a class="d-inline-block nav-link px-0 fs-18" href="#">
              <p class="fw-medium mb-1" >Didn&rsquo;t find the answer? Contact us here</p>
              <div style="height: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%);"></div></a></div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="mw-md-lg ms-auto">
          <div class="mb-6">
            <h3 class="fs-15 fw-medium mb-4" >Is it really unlimited downloads?</h3>
            <p class="mb-7" >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 style="padding-bottom: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)"></div>
          </div>
          <div class="mb-6">
            <h3 class="fs-15 fw-medium mb-4" >Do you offer discounts on annual plans?</h3>
            <p class="mb-7" >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>

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

Bootstrap

Gradia

<section class="pt-24 pb-32 bg-white overflow-hidden">
  <div class="container">
    <div class="mw-lg mx-auto mb-12">
      <h2 class="fs-10 mb-5 text-center text-secondary" >Connect with experts</h2>
      <p class="text-muted text-center" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    </div>
    <div class="mw-4xl mx-auto mb-12">
      <div class="container">
        <div class="row">
          <div class="col">
            <div class="px-10 d-flex align-items-start">
              <div>
                <svg class="position-relative me-3" style="top: 4px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="12" cy="12" r="11.25" stroke="#18181B" stroke-width="1.5"></circle>
                  <path d="M7.41357 12.6552L10.0343 15.2758L16.586 8.72412" stroke="#18181B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
              <div>
                <h3 class="fs-15 text-secondary mb-1" >195+</h3>
                <p class="text-muted mb-0" >Successful Projects</p>
              </div>
            </div>
          </div>
          <div class="col">

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

Bootstrap

Gradia

<section class="pt-28 pb-20 bg-white overflow-hidden">
  <div class="container">
    <div class="text-center mb-28">
      <h3 class="fs-20 fw-semibold text-secondary-light text-uppercase mb-6" style="letter-spacing: 1px;" >The features that made us special</h3>
      <h2 class="fs-10 fw-semibold mb-0" >Here&rsquo;s how it works</h2>
    </div>
    <div class="mw-6xl mx-auto">
      <div class="row g-16">
        <div class="col-12 col-md-4">
          <div class="text-center">
            <svg class="mx-auto mb-9" width="50" height="50" viewbox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M25 9.0712C26.527 7.34116 28.7611 6.25 31.25 6.25C35.8524 6.25 39.5833 9.98096 39.5833 14.5833C39.5833 19.1857 35.8524 22.9167 31.25 22.9167C28.7611 22.9167 26.527 21.8255 25 20.0955M31.25 43.75H6.25V41.6667C6.25 34.7631 11.8464 29.1667 18.75 29.1667C25.6536 29.1667 31.25 34.7631 31.25 41.6667V43.75ZM31.25 43.75H43.75V41.6667C43.75 34.7631 38.1536 29.1667 31.25 29.1667C28.9732 29.1667 26.8386 29.7754 25 30.8389M27.0833 14.5833C27.0833 19.1857 23.3524 22.9167 18.75 22.9167C14.1476 22.9167 10.4167 19.1857 10.4167 14.5833C10.4167 9.98096 14.1476 6.25 18.75 6.25C23.3524 6.25 27.0833 9.98096 27.0833 14.5833Z" stroke="#18181B" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <h3 class="fs-16 fw-medium lh-base mb-0" >Subscribe to a plan that suits you better and place orders as many as you want.</h3>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="text-center">
            <svg class="mx-auto mb-8" width="50" height="50" viewbox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.33301 12.5C8.33301 10.1988 10.1985 8.33334 12.4997 8.33334H16.6663C18.9675 8.33334 20.833 10.1988 20.833 12.5V16.6667C20.833 18.9679 18.9675 20.8333 16.6663 20.8333H12.4997C10.1985 20.8333 8.33301 18.9679 8.33301 16.6667V12.5Z" stroke="#18181B" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M29.1663 12.5C29.1663 10.1988 31.0318 8.33334 33.333 8.33334H37.4997C39.8009 8.33334 41.6663 10.1988 41.6663 12.5V16.6667C41.6663 18.9679 39.8009 20.8333 37.4997 20.8333H33.333C31.0318 20.8333 29.1663 18.9679 29.1663 16.6667V12.5Z" stroke="#18181B" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8.33301 33.3333C8.33301 31.0322 10.1985 29.1667 12.4997 29.1667H16.6663C18.9675 29.1667 20.833 31.0322 20.833 33.3333V37.5C20.833 39.8012 18.9675 41.6667 16.6663 41.6667H12.4997C10.1985 41.6667 8.33301 39.8012 8.33301 37.5V33.3333Z" stroke="#18181B" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M29.1663 33.3333C29.1663 31.0322 31.0318 29.1667 33.333 29.1667H37.4997C39.8009 29.1667 41.6663 31.0322 41.6663 33.3333V37.5C41.6663 39.8012 39.8009 41.6667 37.4997 41.6667H33.333C31.0318 41.6667 29.1663 39.8012 29.1663 37.5V33.3333Z" stroke="#18181B" stroke-width="3" 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 #277

Bootstrap

Gradia

<section class="position-relative pt-24 pb-36 bg-black overflow-hidden"><img class="position-absolute start-50 bottom-0 translate-middle-x" src="gradia-assets/elements/pricing/radial.svg" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <div class="mw-md-xl mx-auto text-center mb-16">
      <h2 class="fs-10 text-white mb-5" >Choose your right plan</h2>
      <p class="text-secondary-light" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    </div>
    <div class="row g-14">
      <div class="col-12 col-md-4">
        <div class="h-100 bg-black p-8 border border-dark-light rounded-3">
          <div class="d-flex justify-content-between border-bottom border-dark-light pb-7 mb-7">
            <h2 class="fs-15 text-white mb-0" >Basic</h2>
            <div>
              <h3 class="fs-15 text-white mb-1" >$29/m</h3>
              <p class="fs-19 text-secondary-light mb-0" >(per user per month)</p>
            </div>
          </div>
          <ul class="list-group list-group-flush mb-8">
            <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0"><img class="me-3" src="gradia-assets/elements/pricing/checkbox.svg" alt=""/>
              <p class="text-white mb-0" >100GB Cloud Storage</p>
            </li>
            <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0"><img class="me-3" src="gradia-assets/elements/pricing/checkbox.svg" alt=""/>
              <p class="text-white mb-0" >1 Website</p>
            </li>
            <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0"><img class="me-3" src="gradia-assets/elements/pricing/checkbox.svg" 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 #278

Bootstrap

Gradia

<section class="pt-20 pb-64 bg-black overflow-hidden" style="background-image: url('gradia-assets/images/http-codes/bg.png'); background-size: cover; background-repeat: no-repeat; background-position: center center;" >
  <div class="container" style="z-index: 50;"><a class="d-inline-block mb-36" href="#"><img src="gradia-assets/logos/gradia-name-white.svg" alt=""/></a>
    <div class="row justify-content-md-end g-16">
      <div class="col-12 col-md-6">
        <div class="mw-md-xl">
          <h2 class="fs-4 text-white lh-sm mb-8" >404 Error</h2>
          <p class="fs-17 text-light-dark mw-md-md mb-11" >The page you are looking for is not found! Try something else or go back to homepage.</p>
          <div class="row g-4">
            <div class="col-auto">
              <div class="d-md-inline-block rounded-1 overflow-hidden">
                <div style="padding:2px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
                  <button class="btn btn-secondary fs-20 text-uppercase px-5 py-4 w-100 h-100" type="button" style="letter-spacing: 1px;" >Go back to Homepage</button>
                </div>
              </div>
            </div>
            <div class="col-auto">
              <div class="d-md-inline-block rounded-1 overflow-hidden">
                <div class="bg-dark-light" style="padding:2px;">
                  <button class="btn btn-secondary fs-20 text-uppercase px-5 py-4 w-100 h-100" type="button" style="letter-spacing: 1px;" >Try searching</button>
                </div>
              </div>
            </div>
          </div>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #279

Bootstrap

Gradia

<section class="py-32 bg-white overflow-hidden" style="background: linear-gradient(98.24deg, #FFFFFF 0%, #F9F9FF 47.4%, #EBECF7 100%);">
  <div class="container">
    <div class="mw-md-md mx-auto text-center mb-16">
      <h2 class="fs-10 text-secondary mb-5" >12k+ Happy Clients</h2>
      <p class="text-muted" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    </div>
    <div class="container">
      <div class="row g-12">
        <div class="col-12 col-md-6">
          <div class="d-flex flex-column h-100 justify-content-between mw-lg">
            <div class="mb-12">
              <div class="d-inline-block px-4 py-3 mb-7" style="border-radius: 8px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">
                <h3 class="fs-20 fw-semibold text-uppercase text-white mb-0" style="letter-spacing: 1px;" >24,000+ Happy Clients</h3>
              </div>
              <h2 class="fs-10 fw-semibold text-secondary mb-5 lh-sm" >Customers say about Gradia services</h2>
              <p class="fs-17 text-secondary mb-0" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
            </div>
            <div><a class="nav-link d-inline-block px-0 fs-18" href="#">
                <p class="fw-medium mb-1" >Read 1447 other reviews</p>
                <div style="height: 2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%);"></div></a></div>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="mw-md-md 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 #280

Bootstrap

Gradia

<section class="pt-24 pb-28 bg-white overflow-hidden">
  <div class="container">
    <h2 class="fs-11 text-center mb-28" >Unlock your startup&rsquo;s true potential</h2>
    <div class="row g-16 g-md-32">
      <div class="col-12 col-md-4">
        <div class="mw-md-xs">
          <div class="rounded-pill mb-7" style="height: 7px; width: 50px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);"></div>
          <h2 class="fs-10 lh-sm mb-3" >67%</h2>
          <p class="fs-17 text-muted mb-0" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="mw-md-xs">
          <div class="rounded-pill mb-7" style="height: 7px; width: 50px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);"></div>
          <h2 class="fs-10 lh-sm mb-3" >115%</h2>
          <p class="fs-17 text-muted mb-0" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="mw-md-xs">
          <div class="rounded-pill mb-7" style="height: 7px; width: 50px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);"></div>
          <h2 class="fs-10 lh-sm mb-3" >157%</h2>
          <p class="fs-17 text-muted mb-0" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Get the code for 13,400+ components

Bootstrap Component #262

Get the code for 13,400+ components

Bootstrap Component #263

Get the code for 13,400+ components

Bootstrap Component #264

Get the code for 13,400+ components

Bootstrap Component #265

Get the code for 13,400+ components

Bootstrap Component #266

Get the code for 13,400+ components

Bootstrap Component #267

Get the code for 13,400+ components

Bootstrap Component #268

Get the code for 13,400+ components

Bootstrap Component #269

Get the code for 13,400+ components

Bootstrap Component #270

Get the code for 13,400+ components

Bootstrap Component #271

Get the code for 13,400+ components

Bootstrap Component #272

Get the code for 13,400+ components

Bootstrap Component #273

Get the code for 13,400+ components

Bootstrap Component #274

Get the code for 13,400+ components

Bootstrap Component #275

Get the code for 13,400+ components

Bootstrap Component #276

Get the code for 13,400+ components

Bootstrap Component #277

Get the code for 13,400+ components

Bootstrap Component #278

Get the code for 13,400+ components

Bootstrap Component #279

Get the code for 13,400+ components

Bootstrap Component #280

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