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

Bootstrap

Solstice

<section class="pb-12 pb-lg-24">
  <nav class="navbar mb-12 navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <svg width="32" height="40" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect y="4" width="32" height="32" rx="8" fill="#282828"></rect>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M28 18L28 13C28 12.4477 27.5523 12 27 12L24 12C23.4477 12 23 12.4477 23 13L23 17C23 20.3137 20.3137 23 17 23L13 23C12.4477 23 12 23.4477 12 24L12 27C12 27.5523 12.4477 28 13 28L18 28C23.5228 28 28 23.5228 28 18Z" fill="white"></path>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M4 22L4 27C4 27.5523 4.44772 28 5 28L8 28C8.55228 28 9 27.5523 9 27L9 23C9 19.6863 11.6863 17 15 17L19 17C19.5523 17 20 16.5523 20 16L20 13C20 12.4477 19.5523 12 19 12L14 12C8.47715 12 4 16.4772 4 22Z" fill="white"></path>
        </svg>
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" 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 class="collapse navbar-collapse ms-6" id="nav01">
        <div class="border-2 border-start border-light py-3 pe-2"></div>
        <ul class="navbar-nav me-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</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 #362

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 position-relative overflow-hidden">
  <nav class="navbar mb-12 navbar-expand-lg navbar-light border-light border-bottom">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-primary" 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 class="collapse navbar-collapse position-relative" id="nav01">
        <ul class="navbar-nav position-absolute top-50 start-50 translate-middle">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</a></li>
              <li><a class="dropdown-item" href="#">Option 3</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Community</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 #363

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 bg-secondary">
  <nav class="navbar mb-12 navbar-expand-lg navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">
        <svg width="32" height="40" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect y="4" width="32" height="32" rx="8" fill="white"></rect>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M28 18L28 13C28 12.4477 27.5523 12 27 12L24 12C23.4477 12 23 12.4477 23 13L23 17C23 20.3137 20.3137 23 17 23L13 23C12.4477 23 12 23.4477 12 24L12 27C12 27.5523 12.4477 28 13 28L18 28C23.5228 28 28 23.5228 28 18Z" fill="#530031"></path>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M4 22L4 27C4 27.5523 4.44772 28 5 28L8 28C8.55228 28 9 27.5523 9 27L9 23C9 19.6863 11.6863 17 15 17L19 17C19.5523 17 20 16.5523 20 16L20 13C20 12.4477 19.5523 12 19 12L14 12C8.47715 12 4 16.4772 4 22Z" fill="#530031"></path>
        </svg>
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" 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 class="collapse navbar-collapse ms-6" id="nav01">
        <div class="border-2 border-start border-secondary-dark py-3 pe-2"></div>
        <ul class="navbar-nav me-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</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 #364

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 bg-secondary">
  <nav class="navbar mb-12 navbar-expand-lg navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="solstice-assets/images/logos/solstice-logo-light.svg" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" 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 class="collapse navbar-collapse position-relative" id="nav01">
        <ul class="navbar-nav position-absolute top-50 start-50 translate-middle">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</a></li>
              <li><a class="dropdown-item" href="#">Option 3</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Community</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 #365

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 bg-secondary">
  <nav class="navbar mb-12 navbar-expand-lg navbar-dark border-bottom border-secondary-dark">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="solstice-assets/images/logos/solstice-logo-light.svg" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" 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 class="collapse navbar-collapse position-relative" id="nav01">
        <ul class="navbar-nav position-absolute top-50 start-50 translate-middle">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</a></li>
              <li><a class="dropdown-item" href="#">Option 3</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Community</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 #366

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 bg-secondary">
  <nav class="navbar mb-12 navbar-expand-lg navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">
        <svg width="32" height="40" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect y="4" width="32" height="32" rx="8" fill="white"></rect>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M28 18L28 13C28 12.4477 27.5523 12 27 12L24 12C23.4477 12 23 12.4477 23 13L23 17C23 20.3137 20.3137 23 17 23L13 23C12.4477 23 12 23.4477 12 24L12 27C12 27.5523 12.4477 28 13 28L18 28C23.5228 28 28 23.5228 28 18Z" fill="#530031"></path>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M4 22L4 27C4 27.5523 4.44772 28 5 28L8 28C8.55228 28 9 27.5523 9 27L9 23C9 19.6863 11.6863 17 15 17L19 17C19.5523 17 20 16.5523 20 16L20 13C20 12.4477 19.5523 12 19 12L14 12C8.47715 12 4 16.4772 4 22Z" fill="#530031"></path>
        </svg>
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" 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 class="collapse navbar-collapse ms-6" id="nav01">
        <div class="border-2 border-start border-secondary-dark py-3 pe-2"></div>
        <ul class="navbar-nav me-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</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 #367

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 position-relative overflow-hidden bg-secondary">
  <nav class="navbar mb-12 navbar-expand-lg navbar-dark border-bottom border-secondary-dark">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="solstice-assets/images/logos/solstice-logo-light.svg" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" 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 class="collapse navbar-collapse position-relative" id="nav01">
        <ul class="navbar-nav position-absolute top-50 start-50 translate-middle">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</a></li>
              <li><a class="dropdown-item" href="#">Option 3</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Community</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 #368

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 bg-primary-light">
  <nav class="navbar mb-12 navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <svg width="32" height="40" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect y="4" width="32" height="32" rx="8" fill="#282828"></rect>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M28 18L28 13C28 12.4477 27.5523 12 27 12L24 12C23.4477 12 23 12.4477 23 13L23 17C23 20.3137 20.3137 23 17 23L13 23C12.4477 23 12 23.4477 12 24L12 27C12 27.5523 12.4477 28 13 28L18 28C23.5228 28 28 23.5228 28 18Z" fill="white"></path>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M4 22L4 27C4 27.5523 4.44772 28 5 28L8 28C8.55228 28 9 27.5523 9 27L9 23C9 19.6863 11.6863 17 15 17L19 17C19.5523 17 20 16.5523 20 16L20 13C20 12.4477 19.5523 12 19 12L14 12C8.47715 12 4 16.4772 4 22Z" fill="white"></path>
        </svg>
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" 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 class="collapse navbar-collapse ms-6" id="nav01">
        <div class="border-2 border-start border-light py-3 pe-2"></div>
        <ul class="navbar-nav me-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</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 #369

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 bg-primary-light">
  <nav class="navbar mb-12 navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" 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 class="collapse navbar-collapse position-relative" id="nav01">
        <ul class="navbar-nav position-absolute top-50 start-50 translate-middle">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</a></li>
              <li><a class="dropdown-item" href="#">Option 3</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Community</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 #370

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 bg-primary-light">
  <nav class="navbar mb-12 navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" 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 class="collapse navbar-collapse position-relative" id="nav01">
        <ul class="navbar-nav position-absolute top-50 start-50 translate-middle">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</a></li>
              <li><a class="dropdown-item" href="#">Option 3</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Community</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 #371

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 bg-primary-light">
  <nav class="navbar mb-12 navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <svg width="32" height="40" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect y="4" width="32" height="32" rx="8" fill="#282828"></rect>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M28 18L28 13C28 12.4477 27.5523 12 27 12L24 12C23.4477 12 23 12.4477 23 13L23 17C23 20.3137 20.3137 23 17 23L13 23C12.4477 23 12 23.4477 12 24L12 27C12 27.5523 12.4477 28 13 28L18 28C23.5228 28 28 23.5228 28 18Z" fill="white"></path>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M4 22L4 27C4 27.5523 4.44772 28 5 28L8 28C8.55228 28 9 27.5523 9 27L9 23C9 19.6863 11.6863 17 15 17L19 17C19.5523 17 20 16.5523 20 16L20 13C20 12.4477 19.5523 12 19 12L14 12C8.47715 12 4 16.4772 4 22Z" fill="white"></path>
        </svg>
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" 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 class="collapse navbar-collapse ms-6" id="nav01">
        <div class="border-2 border-start border-light py-3 pe-2"></div>
        <ul class="navbar-nav me-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</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 #372

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 bg-primary-light position-relative overflow-hidden">
  <nav class="navbar mb-12 navbar-expand-lg navbar-light border-info border-bottom">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-primary" 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 class="collapse navbar-collapse position-relative" id="nav01">
        <ul class="navbar-nav position-absolute top-50 start-50 translate-middle">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</a></li>
              <li><a class="dropdown-item" href="#">Option 3</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Community</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 #373

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 bg-secondary">
  <nav class="navbar mb-12 navbar-expand-lg navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">
        <svg width="32" height="40" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect y="4" width="32" height="32" rx="8" fill="white"></rect>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M28 18L28 13C28 12.4477 27.5523 12 27 12L24 12C23.4477 12 23 12.4477 23 13L23 17C23 20.3137 20.3137 23 17 23L13 23C12.4477 23 12 23.4477 12 24L12 27C12 27.5523 12.4477 28 13 28L18 28C23.5228 28 28 23.5228 28 18Z" fill="#530031"></path>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M4 22L4 27C4 27.5523 4.44772 28 5 28L8 28C8.55228 28 9 27.5523 9 27L9 23C9 19.6863 11.6863 17 15 17L19 17C19.5523 17 20 16.5523 20 16L20 13C20 12.4477 19.5523 12 19 12L14 12C8.47715 12 4 16.4772 4 22Z" fill="#530031"></path>
        </svg>
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" 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 class="collapse navbar-collapse ms-6" id="nav01">
        <div class="border-2 border-start border-secondary-dark py-3 pe-2"></div>
        <ul class="navbar-nav me-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</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 #374

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 bg-secondary">
  <nav class="navbar mb-12 navbar-expand-lg navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="solstice-assets/images/logos/solstice-logo-light.svg" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" 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 class="collapse navbar-collapse position-relative" id="nav01">
        <ul class="navbar-nav position-absolute top-50 start-50 translate-middle">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</a></li>
              <li><a class="dropdown-item" href="#">Option 3</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Community</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 #375

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 bg-secondary">
  <nav class="navbar mb-12 navbar-expand-lg navbar-dark border-bottom border-secondary-dark">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="solstice-assets/images/logos/solstice-logo-light.svg" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" 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 class="collapse navbar-collapse position-relative" id="nav01">
        <ul class="navbar-nav position-absolute top-50 start-50 translate-middle">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</a></li>
              <li><a class="dropdown-item" href="#">Option 3</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Community</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 #376

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 bg-secondary">
  <nav class="navbar mb-12 navbar-expand-lg navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">
        <svg width="32" height="40" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect y="4" width="32" height="32" rx="8" fill="white"></rect>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M28 18L28 13C28 12.4477 27.5523 12 27 12L24 12C23.4477 12 23 12.4477 23 13L23 17C23 20.3137 20.3137 23 17 23L13 23C12.4477 23 12 23.4477 12 24L12 27C12 27.5523 12.4477 28 13 28L18 28C23.5228 28 28 23.5228 28 18Z" fill="#530031"></path>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M4 22L4 27C4 27.5523 4.44772 28 5 28L8 28C8.55228 28 9 27.5523 9 27L9 23C9 19.6863 11.6863 17 15 17L19 17C19.5523 17 20 16.5523 20 16L20 13C20 12.4477 19.5523 12 19 12L14 12C8.47715 12 4 16.4772 4 22Z" fill="#530031"></path>
        </svg>
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" 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 class="collapse navbar-collapse ms-6" id="nav01">
        <div class="border-2 border-start border-secondary-dark py-3 pe-2"></div>
        <ul class="navbar-nav me-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</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 #377

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 position-relative overflow-hidden bg-primary">
  <nav class="navbar mb-12 navbar-expand-lg navbar-dark border-bottom border-info">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="solstice-assets/images/logos/solstice-logo-light.svg" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" 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 class="collapse navbar-collapse position-relative" id="nav01">
        <ul class="navbar-nav position-absolute top-50 start-50 translate-middle">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</a></li>
              <li><a class="dropdown-item" href="#">Option 3</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Community</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 #378

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 bg-primary-light">
  <nav class="navbar mb-12 navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <svg width="32" height="40" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect y="4" width="32" height="32" rx="8" fill="#282828"></rect>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M28 18L28 13C28 12.4477 27.5523 12 27 12L24 12C23.4477 12 23 12.4477 23 13L23 17C23 20.3137 20.3137 23 17 23L13 23C12.4477 23 12 23.4477 12 24L12 27C12 27.5523 12.4477 28 13 28L18 28C23.5228 28 28 23.5228 28 18Z" fill="white"></path>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M4 22L4 27C4 27.5523 4.44772 28 5 28L8 28C8.55228 28 9 27.5523 9 27L9 23C9 19.6863 11.6863 17 15 17L19 17C19.5523 17 20 16.5523 20 16L20 13C20 12.4477 19.5523 12 19 12L14 12C8.47715 12 4 16.4772 4 22Z" fill="white"></path>
        </svg>
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" 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 class="collapse navbar-collapse ms-6" id="nav01">
        <div class="border-2 border-start border-light py-3 pe-2"></div>
        <ul class="navbar-nav me-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</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 #379

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 bg-primary-light">
  <nav class="navbar mb-12 navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" 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 class="collapse navbar-collapse position-relative" id="nav01">
        <ul class="navbar-nav position-absolute top-50 start-50 translate-middle">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</a></li>
              <li><a class="dropdown-item" href="#">Option 3</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Community</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 #380

Bootstrap

Solstice

<section class="pb-12 pb-lg-24 bg-primary-light">
  <nav class="navbar mb-12 navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" 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 class="collapse navbar-collapse position-relative" id="nav01">
        <ul class="navbar-nav position-absolute top-50 start-50 translate-middle">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</a></li>
              <li><a class="dropdown-item" href="#">Option 3</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Community</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

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

Get the code for 13,400+ components

Bootstrap Component #362

Get the code for 13,400+ components

Bootstrap Component #363

Get the code for 13,400+ components

Bootstrap Component #364

Get the code for 13,400+ components

Bootstrap Component #365

Get the code for 13,400+ components

Bootstrap Component #366

Get the code for 13,400+ components

Bootstrap Component #367

Get the code for 13,400+ components

Bootstrap Component #368

Get the code for 13,400+ components

Bootstrap Component #369

Get the code for 13,400+ components

Bootstrap Component #370

Get the code for 13,400+ components

Bootstrap Component #371

Get the code for 13,400+ components

Bootstrap Component #372

Get the code for 13,400+ components

Bootstrap Component #373

Get the code for 13,400+ components

Bootstrap Component #374

Get the code for 13,400+ components

Bootstrap Component #375

Get the code for 13,400+ components

Bootstrap Component #376

Get the code for 13,400+ components

Bootstrap Component #377

Get the code for 13,400+ components

Bootstrap Component #378

Get the code for 13,400+ components

Bootstrap Component #379

Get the code for 13,400+ components

Bootstrap Component #380

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