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

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="row justify-content-center mb-5">
      <div class="col-12 col-lg-8 col-xl-7 text-center mb-4">
        <span class="text-muted">Lorem ipsum</span>
        <h2 class="display-5 fw-bold mt-2 mb-3">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      </div>
      <ul class="nav nav-pills justify-content-center">
        <li class="nav-item"><a class="nav-link active" href="#">General</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Payments</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Returns</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Refunds</a></li>
      </ul>
    </div>
    <div class="row">
      <div class="col-12 col-lg-6 mx-auto">
        <div class="accordion accordion-flush" id="faq01">
          <div class="accordion-item">
            <h2 class="accordion-header" id="faq01-header1">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq01-answer1" aria-expanded="false" aria-controls="faq01-answer1">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</button>
            </h2>
            <div class="accordion-collapse collapse show" id="faq01-answer1" aria-labelledby="faq01-header1" data-bs-parent="#faq01">
              <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</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 #3842

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-md-6 col-lg-3 text-center mb-5 mb-lg-0">
        <svg class="mx-auto" width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="#3d8bfd"></path>
          <circle cx="24" cy="24" r="23.5" stroke="#6ea8fe"></circle>
        </svg>
        <h4 class="mt-3">600 000 000</h4>
        <p class="text-muted">Dolor sit amet consectutar</p>
      </div>
      <div class="col-12 col-md-6 col-lg-3 text-center mb-5 mb-lg-0">
        <svg class="mx-auto" width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="#3d8bfd"></path>
          <circle cx="24" cy="24" r="23.5" stroke="#6ea8fe"></circle>
        </svg>
        <h4 class="mt-3">600 000 000</h4>
        <p class="text-muted">Dolor sit amet consectutar</p>
      </div>
      <div class="col-12 col-md-6 col-lg-3 text-center mb-5 mb-md-0">
        <svg class="mx-auto" width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="#3d8bfd"></path>
          <circle cx="24" cy="24" r="23.5" stroke="#6ea8fe"></circle>
        </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 #3843

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="p-3 p-md-5 bg-light rounded">
      <div class="row align-items-center">
        <div class="col-12 col-lg-8 mb-3 mb-lg-0">
          <div>
            <h3 class="fw-bold">Sign up to our newsletter</h3>
            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
        <div class="col-12 col-md-8 col-lg-4">
          <form action="#">
            <div class="d-flex">
              <input class="form-control me-2" type="email" placeholder="Type your e-mail">
              <button class="btn btn-primary">Action</button>
            </div>
          </form>
        </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 #3844

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-5 mb-5">
        <img class="img-fluid" src="bootstrap5-plain-assets/images/blue-400-square.png" alt="">
      </div>
      <div class="col-12 col-lg-6 col-xl-5 offset-lg-1 offset-xl-2">
        <div>
          <h2 class="display-5 fw-bold mb-5">Lorem ipsum dolor sit amet consectetur</h2>
          <div class="row">
            <div class="col-12 col-md-6 mb-5">
              <span class="d-flex mb-2 justify-content-center align-items-center rounded-circle bg-primary text-white" style="width: 48px;height: 48px">1</span>
              <p class="mt-3 mb-0 lead text-muted">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="col-12 col-md-6 mb-5">
              <span class="d-flex mb-2 justify-content-center align-items-center rounded-circle bg-primary text-white" style="width: 48px;height: 48px">2</span>
              <p class="mt-3 mb-0 lead text-muted">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="col-12 col-md-6 mb-5 mb-mb-0">
              <span class="d-flex mb-2 justify-content-center align-items-center rounded-circle bg-primary text-white" style="width: 48px;height: 48px">3</span>
              <p class="mt-3 mb-0 lead text-muted">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="col-12 col-md-6">
              <span class="d-flex mb-2 justify-content-center align-items-center rounded-circle bg-primary text-white" style="width: 48px;height: 48px">4</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 #3845

Bootstrap

Plain 5

<section class="pt-5">
  <div class="container mb-5">
    <div class="row align-items-center">
      <div class="col-12 col-lg-7 col-xl-5 mb-4 mb-lg-0">
        <h2 class="display-5 fw-bold">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      </div>
      <div class="col-12 col-lg-5 col-xl-5 offset-xl-2">
        <h4 class="fw-bold">Address</h4>
        <p class="text-muted">1686 Geraldine Lane New York, NY 10013</p>
        <h4 class="fw-bold">Contacts</h4>
        <p class="text-muted">hello@wireframes.org</p>
      </div>
    </div>
  </div>
  <div>
    <img class="w-100 img-fluid" src="bootstrap5-plain-assets/images/map.png" alt="">
  </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 #3846

Bootstrap

Plain 5

<div class="position-fixed top-0 start-0 end-0" style="z-index: 50;">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-10 mx-auto mb-4">
        <div class="p-3 p-lg-5 bg-light rounded">
          <h4 class="fw-bold">Cookie Policy</h4>
          <p class="text-muted">We use cookies to personalise content, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners. If you want to change your cookie setting, please see the ‘how to reject cookies' section of our . Otherwise, if you agree to our use of cookies, please continue to use our website.</p>
          <a class="btn btn-primary me-2" href="#">Allow</a><a class="btn btn-outline-danger" href="#">Decline</a>
        </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 #3847

Bootstrap

Plain 5

<section class="position-relative py-lg-5 pb-5">
  <img class="d-none d-lg-block position-absolute top-0 start-0 h-100 col-lg-6" style="object-fit: cover;" src="bootstrap5-plain-assets/images/blue-400-square.png" alt="">
  <img class="d-lg-none w-100 mb-5" style="object-fit: cover;" src="bootstrap5-plain-assets/images/blue-400-square.png" alt="">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6 ms-auto text-center py-lg-5">
        <span class="text-muted">Error 404</span>
        <h2 class="display-5 fw-bold mt-2 mb-3">Page not found</h2>
        <p class="lead text-muted mb-5">Sorry! We are unable to find the page you are looking for</p>
        <div class="d-flex flex-wrap justify-content-center"><a class="btn btn-primary me-2 mb-2 mb-sm-0" href="#">Go back to Homepage</a><a class="btn btn-outline-secondary mb-2 mb-sm-0" href="#">Try Again</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 #3848

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6 p-2">
        <img class="img-fluid rounded" src="bootstrap5-plain-assets/images/blue-400-horizontal.png" alt="">
      </div>
      <div class="col-12 col-lg-6 p-2">
        <img class="img-fluid rounded" src="bootstrap5-plain-assets/images/blue-400-horizontal.png" alt="">
      </div>
      <div class="col-12 col-md-4 p-2">
        <img class="img-fluid rounded" src="bootstrap5-plain-assets/images/blue-400-square.png" alt="">
      </div>
      <div class="col-12 col-md-4 p-2">
        <img class="img-fluid rounded" src="bootstrap5-plain-assets/images/blue-400-square.png" alt="">
      </div>
      <div class="col-12 col-md-4 p-2">
        <img class="img-fluid rounded" src="bootstrap5-plain-assets/images/blue-400-square.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 #3849

Bootstrap

Plain 5

<section class="py-5">
  <div class="container mb-5">
    <div class="row justify-content-center">
      <div class="col-12 col-lg-8 text-center">
        <div class="d-flex justify-content-center align-items-center mb-3">
          <a href="#">Home</a>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 12px;height: 12px">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          </svg>
          <a href="#">Blog</a>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 12px;height: 12px">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          </svg>
          <a href="#">Article</a>
        </div>
        <h2 class="display-4 fw-bold mb-4">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <div class="d-flex justify-content-center align-items-center">
          <div class="me-4">
            <img class="img-fluid" src="bootstrap5-plain-assets/images/blue-400-avatar.png" alt="" style="width: 56px;height: 56px">
          </div>
          <div class="text-start">
            <h4>Danny Bailey</h4>
            <p class="text-muted mb-0">February 26, 2021</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 #3850

Bootstrap

Plain 5

<section class="pt-5">
  <div class="container position-relative text-center">
    <div class="row justify-content-center">
      <div class="col-12 col-lg-8 col-xl-7">
        <span class="text-muted">Lorem ipsum</span>
        <h2 class="mt-2 mb-3 display-5 fw-bold">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="lead text-muted mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <div class="d-flex flex-wrap justify-content-center">
          <a class="me-3 mb-3 mb-sm-0" href="#">
            <img src="bootstrap5-plain-assets/images/buttons/app-store.svg" alt="">
          </a>
          <a href="#">
            <img src="bootstrap5-plain-assets/images/buttons/google-play.svg" alt="">
          </a>
        </div>
      </div>
    </div>
    <div class="mt-5 pt-2">
      <img class="mx-auto img-fluid" src="bootstrap5-plain-assets/images/devices/3-devices.svg" 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 #3851

Bootstrap

Plain 5

<footer class="py-5">
  <div class="container">
    <div class="row border-bottom">
      <div class="col-12 col-lg-3 mb-5">
        <a class="d-inline-block mb-4" href="#">
          <img class="img-fluid" src="bootstrap5-plain-assets/logos/plainb-logo.svg" alt="" width="96px">
        </a>
        <p class="text-muted mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div>
          <a class="d-inline-block me-3" href="#">
            <img class="mx-auto img-fluid" src="bootstrap5-plain-assets/socials/facebook.svg">
          </a>
          <a class="d-inline-block me-3" href="#">
            <img class="mx-auto img-fluid" src="bootstrap5-plain-assets/socials/github.svg">
          </a>
          <a class="d-inline-block me-3" href="#">
            <img class="mx-auto img-fluid" src="bootstrap5-plain-assets/socials/instagram.svg">
          </a>
          <a class="d-inline-block me-3" href="#">
            <img class="mx-auto img-fluid" src="bootstrap5-plain-assets/socials/linkedin.svg">
          </a>
          <a class="d-inline-block" href="#">
            <img class="mx-auto img-fluid" src="bootstrap5-plain-assets/socials/twitter.svg">
          </a>

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

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-lg-8">
        <div class="mx-auto text-center mb-5">
          <span class="text-muted">Lorem Ipsum</span>
          <h2 class="display-5 fw-bold mt-2 mb-3">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          <p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        </div>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-12 col-md-6 col-lg-10">
        <div class="row">
          <div class="col-12 col-lg-6 mb-4">
            <div class="p-4 bg-light rounded">
              <div class="row align-items-center">
                <div class="col-12 col-lg-5 mb-4 mb-lg-0">
                  <img class="img-fluid w-100" style="height: 208px; object-fit: cover;" src="bootstrap5-plain-assets/images/blue-400-square.png" alt="">
                </div>
                <div class="col-12 col-lg-7">
                  <h4 class="fw-bold">Danny Bailey</h4>
                  <p class="text-muted">CEO & Founder</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</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 #3853

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="row mb-5">
      <div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto">
        <span class="text-muted">Lorem ipsum</span>
        <h2 class="display-5 fw-bold mt-2 mb-3">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-8 mb-5">
        <div class="d-flex mb-4">
          <img class="img-fluid" src="bootstrap5-plain-assets/images/blue-400-horizontal.png" alt="">
        </div>
        <span><small class="text-muted">10 jun 2021 19:40</small></span>
        <h2 class="fw-bold">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <a class="d-flex align-items-center" href="#">
          <span>Read More</span>
          <span>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </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 #3854

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-md-6 col-lg-3 text-center mb-5 mb-lg-0">
        <div class="position-relative mx-auto mb-3">
          <div class="d-flex justify-content-center align-items-center position-absolute top-50 start-50 translate-middle">
            <p class="ps-2 mb-0 h5 fw-bold text-muted">65%</p>
          </div>
          <span class="position-relative">
            <svg class="me-3" width="69" height="91" viewbox="0 0 69 91" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M67.9865 79.0753C69.3577 81.148 68.7977 83.9622 66.5984 85.1196C61.1443 87.99 55.1436 89.717 48.9653 90.1747C41.2869 90.7435 33.5909 89.3326 26.6136 86.077C19.6362 82.8215 13.6109 77.8301 9.11396 71.5803C4.61701 65.3306 1.79884 58.0315 0.92903 50.3813C0.0592193 42.7311 1.16686 34.9857 4.146 27.8859C7.12514 20.7861 11.8761 14.5695 17.9445 9.83067C24.0129 5.09182 31.1957 1.98927 38.8058 0.819781C44.9292 -0.12122 51.1644 0.214628 57.1237 1.78733C59.5267 2.42151 60.7042 5.03807 59.8333 7.36576C58.9623 9.69345 56.3723 10.8445 53.9542 10.2706C49.4528 9.20231 44.7734 9.00838 40.1729 9.71535C34.0848 10.6509 28.3385 13.133 23.4838 16.9241C18.6291 20.7151 14.8283 25.6884 12.445 31.3683C10.0617 37.0481 9.17557 43.2444 9.87142 49.3646C10.5673 55.4847 12.8218 61.324 16.4194 66.3238C20.0169 71.3236 24.8372 75.3167 30.419 77.9212C36.0009 80.5256 42.1577 81.6543 48.3004 81.1993C52.9422 80.8554 57.4587 79.616 61.6053 77.5644C63.8329 76.4623 66.6152 77.0025 67.9865 79.0753Z" fill="#6EA8FE"></path>
            </svg>
          </span>
          <span class="position-absolute top-0 start-0 bottom-0 end-0 ms-3">
            <svg width="80" height="90" viewbox="0 0 80 90" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M35 4.5C35 2.01472 37.0197 -0.02331 39.4926 0.224807C45.6251 0.840118 51.5826 2.71056 56.988 5.73768C63.7057 9.49981 69.3458 14.9227 73.3688 21.4876C77.3918 28.0525 79.663 35.5398 79.9653 43.2333C80.2676 50.9268 78.5908 58.5693 75.0953 65.4296C71.5998 72.2899 66.4025 78.1385 60.0007 82.4161C53.5988 86.6937 46.2064 89.2572 38.5307 89.8613C30.8549 90.4654 23.1526 89.0899 16.1603 85.8664C10.5342 83.2728 5.51919 79.5524 1.4168 74.9528C-0.23745 73.098 0.224183 70.2661 2.23482 68.8053C4.24545 67.3445 7.04073 67.8135 8.74082 69.6263C11.9056 73.0009 15.7013 75.7445 19.9283 77.6932C25.522 80.2719 31.6839 81.3723 37.8245 80.889C43.9651 80.4057 49.879 78.355 55.0005 74.9329C60.122 71.5108 64.2798 66.8319 67.0762 61.3437C69.8726 55.8554 71.2141 49.7415 70.9722 43.5866C70.7304 37.4318 68.9134 31.442 65.695 26.1901C62.4767 20.9381 57.9646 16.5998 52.5904 13.5901C48.5293 11.3159 44.0787 9.85769 39.4884 9.28088C37.0225 8.97102 35 6.98528 35 4.5Z" fill="#3d8bfd"></path>
            </svg>
          </span>
        </div>
        <h4>Market Size</h4>
        <p class="text-muted">Dolor sit amet consectutar</p>
      </div>
      <div class="col-12 col-md-6 col-lg-3 text-center mb-5 mb-lg-0">
        <div class="position-relative mx-auto mb-3">

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

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="text-center mb-5">
      <span class="text-muted">Lorem ipsum</span>
      <h2 class="display-5 fw-bold mt-3">Lorem ipsum dolor</h2>
    </div>
    <div class="row">
      <div class="col-12 col-md-6 col-xl-4 mb-5">
        <div>
          <span class="me-4 d-flex justify-content-center align-items-center mb-4 rounded-circle bg-primary text-light" style="width: 56px;height: 56px">
            <svg width="32" height="32" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z" fill="CurrentColor"></path>
            </svg>
          </span>
          <h4 class="fw-bold">Neque porro quisquam est</h4>
          <ul class="text-muted">
            <li><a class="btn" href="">Etiam pellentesque non nibh</a></li>
            <li><a class="btn" href="">Mauris posuere</a></li>
            <li><a class="btn" href="">Tellus sit amet tempus vestibulum</a></li>
            <li><a class="btn" href="">Erat augue imperdiet neque</a></li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-md-6 col-xl-4 mb-5">

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

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-4 mb-5">
        <ul class="list-unstyled">
          <li class="mb-3"><a class="link-dark h3 w-bold text-decoration-none" href="#">Lorem ipsum</a></li>
          <li class="mb-3"><a class="link-secondary h3 w-bold text-decoration-none" href="#">Dolor Sit</a></li>
          <li class="mb-3"><a class="link-secondary h3 w-bold text-decoration-none" href="#">Amet consectutar</a></li>
          <li class="mb-3"><a class="link-secondary h3 w-bold text-decoration-none" href="#">Domor at elis</a></li>
        </ul>
      </div>
      <div class="col-12 col-lg-8">
        <div class="row">
          <div class="col-12 col-md-4 p-2">
            <img class="img-fluid w-100" style="height: 360px; object-fit: cover;" src="bootstrap5-plain-assets/images/blue-400-vertical.png" alt="">
          </div>
          <div class="col-6 col-md-8 p-2">
            <img class="img-fluid w-100" style="height: 360px; object-fit: cover;" src="bootstrap5-plain-assets/images/blue-400-horizontal.png" alt="">
          </div>
          <div class="col-6 col-md-8 p-2">
            <img class="img-fluid w-100" style="height: 360px; object-fit: cover;" src="bootstrap5-plain-assets/images/blue-400-horizontal.png" alt="">
          </div>
          <div class="col-12 col-md-4 p-2">
            <img class="img-fluid w-100" style="height: 360px; object-fit: cover;" src="bootstrap5-plain-assets/images/blue-400-vertical.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 #3857

Bootstrap

Plain 5

<section class="position-relative pt-5 pb-lg-5">
  <div class="container mb-5">
    <div class="row align-items-center">
      <div class="col-12 col-md-8 col-lg-5 offset-lg-7">
        <div class="mb-5">
          <h2 class="fw-bold mb-3">Get questions?</h2>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        </div>
        <div class="row pt-lg-5">
          <div class="col-12 col-md-6 mb-5 mb-md-0">
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="#3d8bfd"></path>
              <circle cx="24" cy="24" r="23.5" stroke="#6ea8fe"></circle>
            </svg>
            <h5 class="mt-3 fw-bold">Visit Us</h5>
            <p class="text-muted mb-1">1686, Geraldine Lane</p>
            <p class="text-muted mb-0">New York, NY 10013</p>
          </div>
          <div class="col-12 col-md-6">
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="#3d8bfd"></path>
              <circle cx="24" cy="24" r="23.5" stroke="#6ea8fe"></circle>
            </svg>
            <h5 class="mt-3 fw-bold">Contact Us</h5>

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

Bootstrap

Plain 5

<nav class="navbar navbar-expand-lg navbar-light py-4">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img class="img-fluid" src="bootstrap5-plain-assets/logos/plainb-logo.svg" alt="" width="96px">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav02" aria-controls="nav02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nav02">
      <ul class="navbar-nav mt-3 mt-lg-0 mb-3 mb-lg-0 ms-lg-3">
        <li class="nav-item me-4"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item me-4"><a class="nav-link" href="#">Company</a></li>
        <li class="nav-item me-4"><a class="nav-link" href="#">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
      </ul>
    </div>
    <div class="d-none d-lg-flex" action="">
      <div class="input-group">
        <input class="form-control" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-secondary" type="submit">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </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 #3859

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="row align-items-center mb-5">
      <div class="col-12 col-md-10 col-lg-6 col-xl-5 mb-4 mb-lg-0">
        <span class="text-muted">Lorem ipsum</span>
        <h2 class="display-5 fw-bold mt-2 mb-3">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      </div>
      <div class="col-12 col-lg-6 col-xl-6 offset-xl-1">
        <img class="img-fluid" src="bootstrap5-plain-assets/images/blue-400-horizontal.png" alt="">
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-md-6 col-lg-4 d-flex mb-5 mb-5">
        <div class="d-flex">
          <span class="flex-shrink-0 d-flex justify-content-center align-items-center bg-primary text-white rounded-circle me-3" style="width: 48px;height: 48px">1</span>
          <div>
            <p class="lead text-muted">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4 d-flex mb-5 mb-5">
        <span class="flex-shrink-0 d-flex justify-content-center align-items-center bg-primary text-white rounded-circle me-3" style="width: 48px;height: 48px">2</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 #3860

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-8 mb-5">
        <div class="d-flex mb-4">
          <img class="img-fluid" src="bootstrap5-plain-assets/images/blue-400-horizontal.png" alt="">
        </div>
        <span><small class="text-muted">10 jun 2021 19:40</small></span>
        <h2 class="fw-bold">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <a class="d-flex align-items-center" href="#">
          <span>Read More</span>
          <span>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </span>
        </a>
      </div>
      <div class="col-12 col-lg-4 mb-5">
        <div class="d-flex mb-4">
          <img class="img-fluid" src="bootstrap5-plain-assets/images/blue-400-horizontal.png" alt="">
        </div>
        <span><small class="text-muted">10 jun 2021 19:40</small></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

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

Get the code for 13,400+ components

Bootstrap Component #3842

Get the code for 13,400+ components

Bootstrap Component #3843

Get the code for 13,400+ components

Bootstrap Component #3844

Get the code for 13,400+ components

Bootstrap Component #3845

Get the code for 13,400+ components

Bootstrap Component #3846

Get the code for 13,400+ components

Bootstrap Component #3847

Get the code for 13,400+ components

Bootstrap Component #3848

Get the code for 13,400+ components

Bootstrap Component #3849

Get the code for 13,400+ components

Bootstrap Component #3850

Get the code for 13,400+ components

Bootstrap Component #3851

Get the code for 13,400+ components

Bootstrap Component #3852

Get the code for 13,400+ components

Bootstrap Component #3853

Get the code for 13,400+ components

Bootstrap Component #3854

Get the code for 13,400+ components

Bootstrap Component #3855

Get the code for 13,400+ components

Bootstrap Component #3856

Get the code for 13,400+ components

Bootstrap Component #3857

Get the code for 13,400+ components

Bootstrap Component #3858

Get the code for 13,400+ components

Bootstrap Component #3859

Get the code for 13,400+ components

Bootstrap Component #3860

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