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

Bootstrap

Plain 5

<section class="position-relative py-5 overflow-hidden">
  <div class="d-none d-md-block position-absolute top-0 start-0 bg-primary w-75 h-100"></div>
  <div class="d-md-none position-absolute top-0 start-0 bg-primary w-100 h-100"></div>
  <div class="container position-relative mx-auto">
    <div class="row align-items-center">
      <div class="col-12 col-md-8 col-lg-5 mb-5">
        <div>
          <h2 class="display-5 fw-bold mb-4 text-white">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          <p class="mb-0 text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        </div>
      </div>
      <div class="col-12 col-md-10 col-lg-5 ms-auto">
        <div class="p-5 bg-light rounded text-center">
          <form action="#">
            <span class="text-muted">Sign In</span>
            <h3 class="fw-bold mb-5">Join our community</h3>
            <input class="form-control mb-2" type="email" placeholder="E-mail address">
            <input class="form-control mb-2" type="password" placeholder="Password">
            <button class="btn btn-primary py-2 w-100 mb-4">Get Started</button>
            <a class="link-secondary d-inline-block mb-4" href="#"><small>Forgot password?</small></a>
            <a class="d-flex justify-content-center align-items-center text-muted mb-2 py-2 bg-white rounded w-100 text-decoration-none" href="#">
              <img class="img-fluid" src="bootstrap5-plain-assets/socials/facebook.svg" alt="">
              <span class="text-muted">Sign in with Facebook</span>
            </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 #3862

Bootstrap

Plain 5

<section class="position-relative py-5">
  <div class="container">
    <div class="row align-items-center mb-5">
      <div class="col-12 col-lg-6 col-xl-5 mb-5 mb-lg-0">
        <div class="d-flex flex-wrap">
          <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-5 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>
              <h4 class="fw-bold">Danny Bailey</h4>
              <p class="text-muted mb-0">February 26, 2021</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 #3863

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-md-7 col-lg-3 text-center mb-5 mb-lg-0">
        <div class="px-2">
          <span class="d-inline-block d-flex justify-content-center align-items-center mx-auto 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>
          <h5 class="fw-bold">Change of access</h5>
          <p class="text-muted mx-auto">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="col-12 col-md-7 col-lg-3 text-center mb-5 mb-lg-0">
        <div class="px-2">
          <span class="d-inline-block d-flex justify-content-center align-items-center mx-auto 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>
          <h5 class="fw-bold">Frequent authentication</h5>
          <p class="text-muted mx-auto">Take care to develop resources continually and integrity them with previous projects.</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 #3864

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-8 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 class="row">
      <div class="col-12 col-md-6 col-lg-4 mb-4">
        <div class="d-flex justify-content-center align-items-center py-5 bg-light rounded">
          <div class="text-center">
            <img class="mx-auto mb-5 img-fluid" src="bootstrap5-plain-assets/images/blue-400-avatar.png" alt="" style="width: 80px;height: 80px">
            <h4 class="fw-bold">Danny Bailey</h4>
            <p class="text-muted">CEO & Founder</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4 mb-4">
        <div class="d-flex justify-content-center align-items-center py-5 bg-light rounded">
          <div class="text-center">
            <img class="mx-auto mb-5 img-fluid" src="bootstrap5-plain-assets/images/blue-400-avatar.png" alt="" style="width: 80px;height: 80px">
            <h4 class="fw-bold">Danny Bailey</h4>

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

Bootstrap

Plain 5

<section class="py-5">
  <div class="container text-center">
    <div class="row justify-content-center mb-5">
      <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="mb-5"><a class="btn btn-primary me-2" href="#">Action</a><a class="btn btn-outline-primary" href="#">Action</a></div>
        <div>
          <img class="mx-auto img-fluid" src="bootstrap5-plain-assets/images/devices/laptop.svg" 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 #3866

Bootstrap

Plain 5

<section class="position-relative py-lg-5 pb-5">
  <img class="d-none d-lg-block position-absolute top-0 end-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 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 #3867

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-lg-9 col-xl-7 text-center">
        <span class="text-muted">New Feature</span>
        <h2 class="display-5 fw-bold mt-2 mb-3">Take quick action that increases your brand's regular profit.</h2>
        <p class="lead text-muted mb-4">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
        <div class="mb-5"><a class="btn btn-primary" href="#">Try Demo</a></div>
        <img class="mx-auto img-fluid" src="bootstrap5-plain-assets/images/blue-400-horizontal.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 #3868

Bootstrap

Plain 5

<section class="position-relative py-5 overflow-hidden">
  <div class="container">
    <div class="row align-items-center justify-content-center">
      <div class="col-12 col-md-10 col-lg-5">
        <h4>Danny Bailey</h4>
        <p class="text-muted mb-5">CEO & Founder</p>
        <h2 class="display-5 fw-bold mb-5">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <div class="d-flex align-items-center">
          <button class="d-none d-lg-block btn btn-light rounded-circle me-2" style="width: 56px;height: 56px">
            <svg class="text-muted" style="width: 28px; height: 28px;" 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="M15 19l-7-7 7-7"></path>
            </svg>
          </button>
          <button class="d-none d-lg-block btn btn-light rounded-circle" style="width: 56px;height: 56px">
            <svg class="text-muted" style="width: 28px; height: 28px;" 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>
          </button>
        </div>
        <div class="d-flex d-lg-none mb-5">
          <button class="btn btn-light rounded-circle me-2" style="width: 56px;height: 56px">
            <svg class="text-muted" style="width: 28px; height: 28px;" 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="M15 19l-7-7 7-7"></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 #3869

Bootstrap

Plain 5

<footer class="py-5">
  <div class="container">
    <div class="row pb-5 border-bottom">
      <div class="col-12 col-md-6 mb-5 mb-md-0">
        <a class="d-inline-block" href="#">
          <img class="img-fluid" src="bootstrap5-plain-assets/logos/plainb-logo.svg" alt="" width="96px">
        </a>
      </div>
      <div class="col-12 col-md-6">
        <ul class="list-unstyled d-flex flex-wrap align-items-center justify-content-lg-end">
          <li class="me-4"><a class="link-secondary" href="#">About</a></li>
          <li class="me-4"><a class="link-secondary" href="#">Company</a></li>
          <li class="me-4"><a class="link-secondary" href="#">Services</a></li>
          <li><a class="link-secondary" href="#">Testimonials</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="mb-5"></div>
  <div class="container">
    <div class="d-flex flex-wrap align-items-center justify-content-between">
      <p>All rights reserved © Wireframes Corporation 2021</p>
      <div>
        <a class="d-inline-block me-4" 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 #3870

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-8 mb-4 mb-lg-0">
        <div class="d-flex align-items-center">
          <span class="me-4 d-flex flex-shrink-0 justify-content-center align-items-center bg-primary rounded-circle text-white" 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>
          <div>
            <h3 class="fw-bold">Sign up to our newsletter</h3>
            <p class="text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </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>

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

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-6 col-lg-3 mb-5 mb-lg-0">
        <div>
          <img class="d-block mx-auto img-fluid" src="bootstrap5-plain-assets/logos/slack.svg" alt="">
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 mb-5 mb-lg-0">
        <div>
          <img class="d-block mx-auto img-fluid" src="bootstrap5-plain-assets/logos/dropbox.svg" alt="">
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 mb-5 mb-md-0">
        <div>
          <img class="d-block mx-auto img-fluid" src="bootstrap5-plain-assets/logos/spotify.svg" alt="">
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div>
          <img class="d-block mx-auto img-fluid" src="bootstrap5-plain-assets/logos/stripe.svg" 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 #3872

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="row align-items-center justify-content-center">
      <div class="col-12 col-md-8 col-xl-4 mb-5 mb-xl-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-md-8 col-xl-4 mb-5 mb-xl-0">
        <div class="p-3 p-md-5 bg-primary rounded text-center">
          <h4 class="text-white">Pro</h4>
          <span class="d-inline-block display-4 fw-bold mb-5 text-white">$65,99</span>
          <ul class="mb-5">
            <li class="d-flex align-items-center mb-3">
              <svg class="text-info me-3" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="text-white mb-0">Complete documentation</p>
            </li>
            <li class="d-flex align-items-center mb-3">
              <svg class="text-info me-3" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="text-white mb-0">Working materials in Figma</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 #3873

Bootstrap

Plain 5

<div class="position-fixed top-0 start-0 end-0" style="z-index: 50;">
  <div class="p-5 bg-light">
    <div class="container">
      <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>

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

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="d-flex flex-wrap">
      <div class="col-12 col-lg-6 p-1">
        <div class="p-5 bg-light">
          <div class="px-5 text-center">
            <span class="d-inline-block d-flex justify-content-center align-items-center mx-auto 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>
            <h5 class="fw-bold mb-3">Frequent authentication</h5>
            <p class="text-muted">The best way to archive better skills is by challenging yourself with exciting projects on the side of your day-to-day work. You can try some of our free projects. Developing you and your brand is a crucial task for any business.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-6 p-1">
        <div class="p-5 bg-light">
          <div class="px-5 text-center">
            <span class="d-inline-block d-flex justify-content-center align-items-center mx-auto 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>

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

Bootstrap

Plain 5

<section class="py-5" style="background-image: url('bootstrap5-plain-assets/images/blue-400-horizontal.png'); background-repeat: no-repeat; background-size: cover;">
  <div class="container text-center">
    <span class="text-white">Error 404</span>
    <h2 class="display-4 fw-bold text-white mt-2 mb-3">Page not found</h2>
    <p class="mb-5 text-white">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-light me-2 mb-2 mb-sm-0" href="#">Go back to Homepage</a><a class="btn btn-outline-light mb-2 mb-sm-0" href="#">Try Again</a></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 #3876

Bootstrap

Plain 5

<div class="position-fixed bottom-0 start-0 mb-4" style="z-index: 50;">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-7 col-xl-5">
        <div class="p-5 bg-light rounded">
          <div class="d-flex flex-wrap align-items-center">
            <div>
              <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.</p>
            </div>
            <div class="d-flex"><a class="btn btn-primary me-2" href="#">Allow</a><a class="btn btn-outline-danger" href="#">Decline</a></div>
          </div>
        </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 #3877

Bootstrap

Plain 5

<section class="py-5 bg-primary">
  <div class="container">
    <div class="row align-items-center justify-content-center">
      <div class="col-12 col-md-10 col-lg-6 mb-4 mb-lg-0">
        <div class="pe-lg-5">
          <span class="text-white">Lorem ipsum</span>
          <h2 class="display-4 fw-bold mt-2 mb-3 text-white">Lorem ipsum dolor sit amet consectutar</h2>
          <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        </div>
      </div>
      <div class="col-12 col-md-10 col-lg-5 offset-lg-1">
        <div class="mx-auto text-center p-5 bg-light rounded">
          <h4 class="fw-bold">Sign up to our newsletter</h4>
          <p class="text-muted mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <form action="#">
            <input class="form-control mb-3" type="email" placeholder="Type your e-mail">
            <button class="btn btn-primary w-100">Action</button>
          </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 #3878

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-md-7 col-lg-5 mx-auto mx-lg-0 mb-5 mb-lg-0">
        <div>
          <h2 class="mb-3 display-5 fw-bold">Get our Free Mobile App</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">
            <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="col-12 col-lg-6 offset-xl-1">
        <img class="d-block mx-auto img-fluid" src="bootstrap5-plain-assets/images/devices/2-devices.svg" alt="">
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3879

Bootstrap

Plain 5

<section class="py-5">
  <div class="container">
    <div class="row mb-5">
      <div class="col-12 col-lg-8 mx-auto text-center">
        <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="mb-5 p-4 p-lg-5 bg-light rounded">
      <div class="row">
        <div class="col-12 col-md-12 col-lg-6 col-xl-6 pt-lg-5">
          <div class="pe-lg-5">
            <h2 class="display-4 fw-bold mb-3">Premium Membership</h2>
            <p class="lead text-muted mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          </div>
          <div>
            <ul class="row mb-5 mb-lg-0 ps-0">
              <li class="col-12 col-md-6 d-flex align-items-center mb-2">
                <svg class="text-muted me-3" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <p class="mb-0">Complete documentation</p>
              </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 #3880

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

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

Get the code for 13,400+ components

Bootstrap Component #3862

Get the code for 13,400+ components

Bootstrap Component #3863

Get the code for 13,400+ components

Bootstrap Component #3864

Get the code for 13,400+ components

Bootstrap Component #3865

Get the code for 13,400+ components

Bootstrap Component #3866

Get the code for 13,400+ components

Bootstrap Component #3867

Get the code for 13,400+ components

Bootstrap Component #3868

Get the code for 13,400+ components

Bootstrap Component #3869

Get the code for 13,400+ components

Bootstrap Component #3870

Get the code for 13,400+ components

Bootstrap Component #3871

Get the code for 13,400+ components

Bootstrap Component #3872

Get the code for 13,400+ components

Bootstrap Component #3873

Get the code for 13,400+ components

Bootstrap Component #3874

Get the code for 13,400+ components

Bootstrap Component #3875

Get the code for 13,400+ components

Bootstrap Component #3876

Get the code for 13,400+ components

Bootstrap Component #3877

Get the code for 13,400+ components

Bootstrap Component #3878

Get the code for 13,400+ components

Bootstrap Component #3879

Get the code for 13,400+ components

Bootstrap Component #3880

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