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

Bootstrap

Gradia

<section class="position-relative pt-28 pb-32 bg-black overflow-hidden"><img class="h-100 position-absolute top-0 start-50 translate-middle-x" src="gradia-assets/elements/how-it-works/radial.svg" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <div class="mw-md-xl">
      <h2 class="fs-10 text-white mb-6" >Three steps to get started</h2>
      <p class="text-secondary-light mb-16" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
    </div>
    <div class="d-flex flex-nowrap mb-11">
      <div class="flex-shrink-0 me-6 bg-secondary pt-12 pb-10 px-9 mw-md rounded-3">
        <div class="d-flex align-items-center justify-content-center mb-11 rounded-pill" style="width: 50px; height:50px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">
          <h3 class="fs-16 mb-0" >1</h3>
        </div>
        <p class="fs-16 text-white mb-0" >Subscribe to a plan that suits you better and place orders as many as you want.</p>
      </div>
      <div class="flex-shrink-0 me-6 bg-secondary pt-12 pb-10 px-9 mw-md rounded-3">
        <div class="d-flex align-items-center justify-content-center mb-11 rounded-pill" style="width: 50px; height:50px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">
          <h3 class="fs-16 mb-0" >2</h3>
        </div>
        <p class="fs-16 text-white mb-0" >Subscribe to a plan that suits you better and place orders as many as you want.</p>
      </div>
      <div class="flex-shrink-0 me-6 bg-secondary pt-12 pb-10 px-9 mw-md rounded-3">
        <div class="d-flex align-items-center justify-content-center mb-11 rounded-pill" style="width: 50px; height:50px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">
          <h3 class="fs-16 mb-0" >3</h3>
        </div>
        <p class="fs-16 text-white mb-0" >Subscribe to a plan that suits you better and place orders as many as you want.</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 #302

Bootstrap

Gradia

<section class="pt-28 pb-32 bg-secondary overflow-hidden">
  <div class="container">
    <h2 class="fs-10 fw-semibold text-white text-center text-secondary mb-16" >Trusted by popular marketing brands</h2>
    <div class="mw-md-6xl mx-auto border-bottom border-dark-light pb-20 mb-16">
      <div class="row justify-content-center align-items-center text-center">
        <div class="col-12 col-md-6 col-lg-3 p-5"><img class="img-fluid" src="gradia-assets/logos/brands/brand-light4.png" alt=""/></div>
        <div class="col-12 col-md-6 col-lg-3 p-5"><img class="img-fluid" src="gradia-assets/logos/brands/brand-light1.png" alt=""/></div>
        <div class="col-12 col-md-6 col-lg-3 p-5"><img class="img-fluid" src="gradia-assets/logos/brands/brand-light2.png" alt=""/></div>
        <div class="col-12 col-md-6 col-lg-3 p-5"><img class="img-fluid" src="gradia-assets/logos/brands/brand-light3.png" alt=""/></div>
      </div>
    </div>
    <div class="d-flex align-items-center justify-content-center mb-10"><img class="p-1" src="gradia-assets/elements/logos/star.svg" alt=""/><img class="p-1" src="gradia-assets/elements/logos/star.svg" alt=""/><img class="p-1" src="gradia-assets/elements/logos/star.svg" alt=""/><img class="p-1" src="gradia-assets/elements/logos/star.svg" alt=""/><img class="p-1" src="gradia-assets/elements/logos/star.svg" alt=""/></div>
    <div class="text-center mw-md-3xl mx-auto">
      <p class="fs-16 text-secondary-dark mb-5" >&ldquo;You made it so simple. My new team is so much faster and easier to work with than my old site. I just choose the page, make the change.&rdquo;</p>
      <h3 class="fs-16 fw-medium text-white mb-0" >Denny Jones, founder of Growthio</h3>
    </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 #303

Bootstrap

Gradia

<section class="py-36 bg-white overflow-hidden">
  <div class="container">
    <div class="p-16" style="background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%); border-radius: 10px;">
      <div class="container">
        <div class="row justify-content-sm-between align-items-md-center g-16">
          <div class="col-12 col-md-6">
            <div class="mw-md-md">
              <h3 class="fs-16 fw-medium text-secondary opacity-75 mb-4" >Start with a free account</h3>
              <h2 class="fs-11 text-secondary mb-0" >Ready to grow your online business?</h2>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="container">
              <div class="row justify-content-md-end g-4">
                <div class="col-12 col-md-auto">
                  <button class="btn btn-light h-100 px-10 py-5 w-100 text-uppercase" type="button" style="letter-spacing: 1px;" >Sign up now</button>
                </div>
                <div class="col-12 col-md-auto">
                  <button class="btn btn-outline-light h-100 d-flex justify-content-center align-items-center px-10 py-5 w-100 text-uppercase" type="button" style="letter-spacing: 1px;">
                    <div>
                      <svg class="me-2" width="19" height="18" viewbox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M8.18003 13.4261C6.8586 14.3918 5 13.448 5 11.8113V5.43865C5 3.80198 6.8586 2.85821 8.18003 3.82387L12.5403 7.01022C13.6336 7.80916 13.6336 9.44084 12.5403 10.2398L8.18003 13.4261Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div><span class="mb-0" >How it works</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 #304

Bootstrap

Gradia

<section class="pt-20 pb-32 bg-black overflow-hidden">
  <div class="container">
    <div class="text-center"><a class="d-inline-block mb-28" href="#"><img class="img-fluid" src="gradia-assets/logos/gradia-name-white.svg" alt=""/></a></div>
    <div class="row g-16">
      <div class="col-12 col-md-6">
        <div class="d-flex justify-content-center">
          <div class="d-inline-block p-1 rounded-pill" style="background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%);"><img class="img-fluid rounded-pill" src="gradia-assets/images/sign-in/woman.jpeg" alt=""/></div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="mw-md-lg">
          <h2 class="fs-10 text-white mb-2" >Welcome to Gradia</h2>
          <p class="fs-17 text-dark mb-16" >Lorem ipsum dolor sit amet, consectetur adipis.</p>
          <form>
            <div class="row mb-4 g-4">
              <div class="col-12">
                <div class="form-group">
                  <label class="fs-18 fw-medium text-white mb-3" for="signInInput3-1" >Email address</label>
                  <div class="rounded-1" style="padding: 1px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)">
                    <input class="bg-black text-dark px-5 py-4 w-100 border-0 rounded-1" id="signInInput3-1" style="border-radius: 3px;" type="email" placeholder="i.e. john@example.com"/>
                  </div>
                </div>
              </div>
              <div class="col-12">

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

Bootstrap

Gradia

<section class="py-32 bg-black overflow-hidden">
  <div class="container">
    <div class="row g-16">
      <div class="col-12 col-md-6">
        <div class="mw-md-md">
          <h2 class="fs-10 text-white mb-6" >Open positions</h2>
          <p class="fs-17 text-secondary-light mb-0" >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>
      </div>
      <div class="col-12 col-md-6"><a class="d-block" href="#">
          <div class="p-6 border border-bottom-0 border-dark-light">
            <div class="row align-items-center g-4">
              <div class="col-12 col-md-6">
                <div class="mb-1">
                  <h3 class="d-inline-block bg-secondary text-secondary-dark fs-20 fw-semibold px-3 py-2 mb-6 text-uppercase rounded-pill" style="letter-spacing: 1px;" >Full-time</h3>
                  <h3 class="fs-17 text-white mb-0" >Team Leader</h3>
                </div>
                <div class="d-flex">
                  <p class="text-dark mb-0" >Toledo, USA</p>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="d-flex justify-content-md-end">
                  <button class="btn btn-outline-light fs-18 fw-medium px-4 py-3 rounded" type="button" >Apply Now</button>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #306

Bootstrap

Gradia

<section class="py-44 bg-black overflow-hidden">
  <div class="container">
    <div class="row align-items-center g-24">
      <div class="col-12 col-md-8">
        <div class="mw-md-3xl">
          <div class="container">
            <div class="row align-items-center g-9">
              <div class="col-auto col-md-auto">
                <div class="d-inline-block overflow-hidden rounded-pill" style="background: linear-gradient(98.24deg, #6CD5F7 0%, #F89D5C 50.52%, #5B6AF0 100%);"><img class="img-fluid" src="gradia-assets/images/numbers/avatar-bg.png" alt=""/></div>
              </div>
              <div class="col-auto col-md-6">
                <p class="text-secondary-dark mb-6" >&ldquo;You made it so simple. My new team is so much faster and easier to work with than my old site. I just choose the page, make the change.&rdquo;</p>
                <h3 class="fs-16 fw-medium text-white mb-0" >Denny Jones, founder of Growthio</h3>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="mw-xs mx-auto p-4 py-9 text-center rounded-3" style="background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
          <h2 class="fs-2 mb-6" style="letter-spacing: -2px" >58:1</h2>
          <p class="fs-17 text-secondary mb-0" >Average Ad ROI when we do marketing for eCommerce</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 #307

Bootstrap

Gradia

<section class="pt-24 bg-white overflow-hidden" style="background: linear-gradient(98.24deg, #FFFFFF 0%, #F9F9FF 47.4%, #EBECF7 100%);">
  <div class="container">
    <div class="row border-bottom pb-20 g-16">
      <div class="col-12 col-md-6 col-lg-3">
        <h3 class="fs-20 fw-semibold text-dark text-uppercase mb-9" style="letter-spacing: 1px;" >Company</h3>
        <ul class="nav flex-column">
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Features</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Pricing</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Affiliate Program</h3></a></li>
          <li class="nav-item"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Press Kit</h3></a></li>
        </ul>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <h3 class="fs-20 fw-semibold text-dark text-uppercase mb-9" style="letter-spacing: 1px;" >Support</h3>
        <ul class="nav flex-column">
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Account</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Help</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" 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 #308

Bootstrap

Gradia

<section class="position-relative pt-24 pb-32 bg-black overflow-hidden"><img class="position-absolute start-50 bottom-0 translate-middle-x" src="gradia-assets/elements/faq/radial.svg" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <h2 class="fs-10 fw-semibold text-white mb-16" >Frequently Asked Question</h2>
    <div class="py-9 border-top border-dark-light">
      <div class="row g-12">
        <div class="col-12 col-md-6">
          <h3 class="fs-16 fw-medium text-white mb-0" >Is it really unlimited downloads?</h3>
        </div>
        <div class="col-12 col-md-6">
          <div class="mw-md-xl ms-auto">
            <p class="text-light-dark" >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>
    </div>
    <div class="py-9 border-top border-dark-light">
      <div class="row g-12">
        <div class="col-12 col-md-6">
          <h3 class="fs-16 fw-medium text-white mb-0" >What kind of file do you offer with the packages?</h3>
        </div>
        <div class="col-12 col-md-6">
          <div class="mw-md-xl ms-auto">
            <p class="text-light-dark" >Consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis.</p>
          </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #309

Bootstrap

Gradia

<section class="py-36 bg-light-light overflow-hidden">
  <div class="container">
    <div class="row align-items-center g-16">
      <div class="col-12 col-md-5">
        <div class="d-flex justify-content-center"><img class="img-fluid" src="gradia-assets/images/applications/phone.png" alt=""/></div>
      </div>
      <div class="position-relative col-12 col-md-7"><img class="position-absolute top-0 start-0" src="gradia-assets/elements/applications/radial.svg" alt=""/>
        <div class="position-relative mw-md-2xl text-center" style="z-index: 50;">
          <h2 class="fs-7 lh-sm mb-7" >Download. Use. Grow</h2>
          <p class="fs-17 text-muted mb-12" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
          <div class="row justify-content-center g-5 mb-7">
            <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>
          </div>
          <p class="text-muted mb-0" >46k+ users are using Gradia app</p>
        </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 #310

Bootstrap

Gradia

<section class="position-relative py-24 bg-black overflow-hidden"><img class="position-absolute bottom-0 start-0" src="gradia-assets/elements/footers/radial2.svg" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <div class="row g-16">
      <div class="col-12 col-md-6 col-lg-6">
        <div class="d-flex flex-column justify-content-between h-100">
          <div class="mb-11"><a class="d-inline-block mb-11" href="#"><img class="img-fluid" src="gradia-assets/logos/gradia-name-white.svg" alt=""/></a>
            <p class="text-light-dark fw-medium mw-md" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pretium dui convallis sagittis tempus mi viverra eget. Quisque justo, blandit orci.</p>
          </div>
          <div>
            <p class="fs-19 text-secondary-light mb-0" >&copy; Copyright 2022. All Rights Reserved by Gradia.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-2">
        <h3 class="fs-18 fw-medium text-dark mb-9" >Company</h3>
        <ul class="nav flex-column">
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium text-white mb-0" >Features</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium text-white mb-0" >Pricing</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium text-white mb-0" >Affiliate Program</h3></a></li>
          <li class="nav-item"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium text-white mb-0" >Press Kit</h3></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 #311

Bootstrap

Gradia

<section class="pt-24 pb-32 bg-white overflow-hidden">
  <div class="container">
    <div class="mw-md-xl mx-auto text-center mb-20">
      <h2 class="fs-10 text-secondary lh-sm mb-9" >Everything you need to launch a website</h2>
      <div class="d-flex justify-content-center">
        <div class="form-check me-9">
          <input class="form-check-input" id="pricingInput4-1" type="radio" name="flexRadioDefault"/>
          <label class="form-check-label" for="pricingInput4-1">
            <p class="fs-18 fw-medium text-dark mb-0"><span >Annually </span><span class="text-primary" >(Save up to 25%)</span></p>
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" id="pricingInput4-2" type="radio" name="flexRadioDefault"/>
          <label class="form-check-label" for="pricingInput4-2">
            <p class="fs-18 fw-medium text-dark mb-0" >Monthly</p>
          </label>
        </div>
      </div>
    </div>
    <div class="row g-6">
      <div class="col-12 col-md-6 col-lg-3">
        <div class="h-100 bg-white p-10 border border-light-light rounded-3">
          <h2 class="fs-18 fw-medium mb-9" >Free Plan</h2>
          <div class="d-flex align-items-end border-bottom border-light-light pb-9 mb-8">

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

Bootstrap

Gradia

<section class="position-relative pt-16 pb-64 bg-black overflow-hidden"><img class="position-absolute top-0 start-50 translate-middle-x h-100" src="gradia-assets/elements/http-codes/radial2.svg" alt=""/>
  <div class="container">
    <div class="position-relative" style="z-index: 50;">
      <div class="text-center"><a class="d-inline-block mb-60" href="#"><img src="gradia-assets/logos/gradia-name-white.svg" alt=""/></a></div>
      <div class="mb-24 text-center"><img class="img-fluid" src="gradia-assets/elements/http-codes/404.png" alt=""/></div>
      <div class="mw-2xl mx-auto">
        <div class="row align-items-end g-4">
          <div class="col-12 col-md-6">
            <h2 class="fs-12 fw-semibold lh-sm text-white mb-0" >Something went wrong!</h2>
          </div>
          <div class="col-12 col-md-6">
            <div class="d-flex align-items-center"><a class="d-flex align-items-center text-white" href="#">
                <svg class="me-3" width="19" height="19" viewbox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8 14.75L2.75 9.5M2.75 9.5L8 4.25M2.75 9.5L16.25 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <h3 class="fs-20 fw-semibold text-white text-uppercase mb-0" style="letter-spacing: 1px;" >Go back to Homepage</h3></a></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 #313

Bootstrap

Gradia

<section class="position-relative pt-24 pb-32 bg-white overflow-hidden">
  <div class="container">
    <div class="mw-md-2xl mx-auto text-center mb-16">
      <h2 class="fs-10 mb-6 lh-sm" >A simple &amp; smart way to grow your marketing team</h2>
      <p class="mb-0 text-muted mx-auto mb-0 mw-md-lg" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.</p>
    </div>
    <div class="mw-7xl mx-auto">
      <div class="container">
        <div class="row g-16">
          <div class="col-12 col-md-4">
            <div><a class="d-block mb-9" href="#"><img class="w-100" src="gradia-assets/images/features/experts.png" alt=""/></a>
              <h4 class="fs-16 mb-4" >2100+ marketing experts</h4>
              <p class="text-muted mb-5" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p><a class="d-inline-block" href="#" style="text-decoration: none;">
                <h4 class="fs-18 fw-medium">
                  <p class="mb-2" >Learn more</p>
                  <div class="w-100 h-px bg-black" style="background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%); height: 2px;"></div>
                </h4></a>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div><a class="d-block mb-9" href="#"><img class="w-100" src="gradia-assets/images/features/insights.png" alt=""/></a>
              <h4 class="fs-16 mb-4" >Live analytics &amp; insights</h4>
              <p class="text-muted mb-5" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p><a class="d-inline-block" href="#" style="text-decoration: none;">
                <h4 class="fs-18 fw-medium">

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

Bootstrap

Gradia

<section class="position-relative pt-28 bg-black overflow-hidden"><img class="position-absolute start-0 bottom-0 w-100" src="gradia-assets/elements/applications/radial2.svg" alt=""/>
  <div class="container">
    <div class="position-relative mw-md-xl mx-auto text-center" style="z-index: 50;">
      <h2 class="fs-7 lh-sm text-white mb-7" >Try Gradia App Free</h2>
      <p class="fs-17 text-secondary-light mb-11" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
      <div class="row justify-content-center g-5 mb-28">
        <div class="col-auto"><a href="#"><img src="gradia-assets/logos/brands/app-store-gradient-green.png" alt=""/></a></div>
        <div class="col-auto"><a href="#"><img src="gradia-assets/logos/brands/play-store-gradient-green.png" alt=""/></a></div>
      </div><img class="img-fluid" src="gradia-assets/images/applications/phone-half.png" alt=""/>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #315

Bootstrap

Gradia

<section>
  <nav class="navbar navbar-dark navbar-expand-lg bg-white py-5 py-lg-3 px-5 px-lg-40"  >
    <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 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" >Resources</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-lg-none">
        <button class="btn navbar-burger p-0">
          <svg class="text-dark-light" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="56" height="56" rx="28" fill="currentColor"></rect>
            <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </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 #316

Bootstrap

Gradia

<section class="position-relative py-36 bg-light-light overflow-hidden"><img class="position-absolute top-0 start-50 translate-middle-x" src="gradia-assets/elements/testimonials/radial2.svg" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <div class="mw-6xl mx-auto">
      <div class="container">
        <div class="row g-12">
          <div class="col-12 col-md-6">
            <h2 class="fs-11 fw-semibold px-8 mb-14 lh-sm" >5,920+ people think Gradia is the best</h2>
            <div class="p-12 bg-white rounded-3">
              <h2 class="fs-16 fw-medium mb-5" >&ldquo;Easy to use&rdquo;</h2>
              <p class="fs-17 text-black mb-7" >&ldquo;Amet minim mollit non deserunt ullam co est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.&rdquo;</p>
              <div class="container">
                <div class="row align-items-center g-3">
                  <div class="col-auto"><img src="gradia-assets/images/testimonials/avatar7.png" alt=""/></div>
                  <div class="col-auto">
                    <h3 class="fs-17 mb-1" >Marvin McKinney</h3>
                    <p class="fs-19 text-muted mb-0" >Co-founder at Parkon</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="p-12 mb-12 bg-white rounded-3">
              <h2 class="fs-16 fw-medium mb-5" >&ldquo;Very fast video output&rdquo;</h2>

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

Bootstrap

Gradia

<section class="py-36 bg-white overflow-hidden">
  <div class="container">
    <div class="mw-4xl mx-auto">
      <div class="row mb-20">
        <div class="col-12 col-sm-4 d-flex justify-content-center">
          <div class="d-inline-block"><a class="nav-link d-inline-block px-7 mb-2" href="#">
              <h3 class="fs-17 fw-semibold text-secondary mb-0" >Create Free Account</h3></a>
            <div style="height: 3px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);"></div>
          </div>
        </div>
        <div class="col-12 col-sm-4 d-flex justify-content-center">
          <div class="d-inline-block"><a class="nav-link d-inline-block px-7 mb-2" href="#">
              <h3 class="fs-17 fw-semibold text-secondary mb-0" >Build A Team</h3></a>
            <div class="bg-light-light" style="height: 3px;"></div>
          </div>
        </div>
        <div class="col-12 col-sm-4 d-flex justify-content-center">
          <div class="d-inline-block"><a class="nav-link d-inline-block px-7 mb-2" href="#">
              <h3 class="fs-17 fw-semibold text-secondary mb-0" >Start Your Project</h3></a>
            <div class="bg-light-light" style="height: 3px;"></div>
          </div>
        </div>
      </div>
      <div class="row align-items-center g-16">

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

Bootstrap

Gradia

<section class="pt-24 pb-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-20">
      <h2 class="fs-10 fw-semibold text-center mb-4" >Got questions?</h2>
      <p class="fs-17 text-muted mb-0" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
    </div>
    <div class="mw-md-6xl mx-auto">
      <div class="row g-20 mb-10">
        <div class="col-12 col-md-6">
          <h3 class="fs-15 fw-medium mb-4" >Is it really unlimited downloads?</h3>
          <p class="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 class="col-12 col-md-6">
          <h3 class="fs-15 fw-medium mb-4" >Is it really unlimited downloads?</h3>
          <p class="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="row g-20 mb-10">
        <div class="col-12 col-md-6">
          <h3 class="fs-15 fw-medium mb-4" >Do you offer discounts on annual plans?</h3>
          <p class="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 class="col-12 col-md-6">
          <h3 class="fs-15 fw-medium mb-4" >Do you offer discounts on annual plans?</h3>

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

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 text-secondary mb-5" >Team Members</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="mw-6xl mx-auto">
      <div class="container">
        <div class="row g-12">
          <div class="col-12 col-sm-6 col-lg-4">
            <div class="text-center bg-white p-16 mb-12 shadow-lg rounded-3"><img class="mb-11" src="gradia-assets/images/teams/avatar-md.png" alt=""/>
              <h3 class="fs-17 mb-1" >Darlene Robertson</h3>
              <p class="text-muted mb-0" >Co-Founder, CEO </p>
            </div>
            <div class="text-center bg-white p-16 shadow-lg rounded-3"><img class="mb-11" src="gradia-assets/images/teams/avatar-md4.png" alt=""/>
              <h3 class="fs-17 mb-1" >Esther Howard</h3>
              <p class="text-muted mb-0" >Software Developer</p>
            </div>
          </div>
          <div class="mt-lg-28 col-12 col-sm-6 col-lg-4">
            <div class="text-center bg-white p-16 mb-12 shadow-lg rounded-3"><img class="mb-11" src="gradia-assets/images/teams/avatar-md2.png" alt=""/>
              <h3 class="fs-17 mb-1" >Albert Flores</h3>
              <p class="text-muted mb-0" >Co-Founder, CTO</p>
            </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #320

Bootstrap

Gradia

<section class="py-36 bg-light-light overflow-hidden">
  <div class="container">
    <div class="row g-10">
      <div class="col-12 col-md-6 col-lg-3">
        <div class="h-100 p-7 bg-white rounded-3">
          <h2 class="fs-8 mb-4" >43%</h2>
          <p class="text-muted mb-10" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p><a class="nav-link d-inline-block px-0" href="#">
            <h3 class="fs-18 fw-medium mb-2" >Read case study</h3>
            <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 class="col-12 col-md-6 col-lg-3">
        <div class="h-100 p-7 bg-white rounded-3">
          <h2 class="fs-8 mb-4" >79%</h2>
          <p class="text-muted mb-10" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p><a class="nav-link d-inline-block px-0" href="#">
            <h3 class="fs-18 fw-medium mb-2" >Read case study</h3>
            <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 class="col-12 col-md-6 col-lg-3">
        <div class="h-100 p-7 bg-white rounded-3">
          <h2 class="fs-8 mb-4" >16%</h2>
          <p class="text-muted mb-10" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p><a class="nav-link d-inline-block px-0" href="#">
            <h3 class="fs-18 fw-medium mb-2" >Read case study</h3>

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

Get the code for 13,400+ components

Bootstrap Component #302

Get the code for 13,400+ components

Bootstrap Component #303

Get the code for 13,400+ components

Bootstrap Component #304

Get the code for 13,400+ components

Bootstrap Component #305

Get the code for 13,400+ components

Bootstrap Component #306

Get the code for 13,400+ components

Bootstrap Component #307

Get the code for 13,400+ components

Bootstrap Component #308

Get the code for 13,400+ components

Bootstrap Component #309

Get the code for 13,400+ components

Bootstrap Component #310

Get the code for 13,400+ components

Bootstrap Component #311

Get the code for 13,400+ components

Bootstrap Component #312

Get the code for 13,400+ components

Bootstrap Component #313

Get the code for 13,400+ components

Bootstrap Component #314

Get the code for 13,400+ components

Bootstrap Component #315

Get the code for 13,400+ components

Bootstrap Component #316

Get the code for 13,400+ components

Bootstrap Component #317

Get the code for 13,400+ components

Bootstrap Component #318

Get the code for 13,400+ components

Bootstrap Component #319

Get the code for 13,400+ components

Bootstrap Component #320

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