Redirecting to PayPal

Bulma Components – Bendis Library

Browse 211 ready-made Bulma components from the Bendis UI library. Every variant is fully responsive – copy the code or customize it in the visual editor and export clean code.

Framework

UI Library

Lifetime Access

Full Shuffle access forever for $249

Pay once, ship unlimited projects. No subscription, no renewals, all future updates included.

Get Lifetime Access

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

Bulma Component #201

<div>
  <nav class="is-relative navbar py-2 has-background-white">
    <div class="navbar-brand is-align-items-center">
      <a class="navbar-item" href="#">
        <span class="navbar-item px-0 title is-size-5 has-text-dark">
          <img src="bendis-assets/logos/bendis-blue.svg" alt="" style="max-height: initial;">
        </span>
      </a>
      <a class="navbar-menu-open navbar-burger is-hidden-desktop is-flex is-align-items-center is-justify-content-center" role="button" type="button" data-toggle="side-menu">
        <svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2.5" y="6" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="11" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="16" width="20" height="2" fill="#1633AB"></rect></svg>
      </a>
    </div>
    <div class="is-hidden-mobile is-hidden-tablet-only is-absolute" style="top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);">
      <ul class="navbar-item">
        <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">About</a></li>
        <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">Company</a></li>
        <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">Services</a></li>
        <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">Testimonials</a></li>
      </ul>
    </div>
    <div class="navbar-menu is-hidden-mobile">
      <div class="navbar-end">
        <a class="navbar-item" href="#">Sign In</a>
        <div class="navbar-item"><a class="button is-outlined is-primary" href="#">Sign Up</a></div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #202

<section class="section py-24">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column is-6">
        <div class="has-mw-sm mx-auto">
          <h2 class="title is-size-3 has-leading-3 has-text-primary">Lorem ipsum dolor sit amet consectutar</h2>
          <p class="subtitle is-size-5 mt-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        </div>
      </div>
      <div class="column is-6">
        <div class="columns is-multiline">
          <div class="column is-4">
            <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-4 has-background-light" style="height: 140px;">
              <img class="image mx-auto" src="bendis-assets/logos/slack.svg" alt="">
            </div>
          </div>
          <div class="column is-4">
            <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-4 has-background-light" style="height: 140px;">
              <img class="image mx-auto" src="bendis-assets/logos/dropbox.svg" alt="">
            </div>
          </div>
          <div class="column is-4">
            <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-4 has-background-light" style="height: 140px;">
              <img class="image mx-auto" src="bendis-assets/logos/spotify.svg" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #203

<div>
  <nav class="navbar py-2 has-background-white">
    <div class="navbar-brand is-align-items-center">
      <a class="navbar-item" href="#">
        <span class="navbar-item px-0 title is-size-5 has-text-dark">
          <img src="bendis-assets/logos/bendis-blue.svg" alt="" style="max-height: initial;">
        </span>
      </a>
      <a class="navbar-menu-open navbar-burger is-hidden-desktop is-flex is-align-items-center is-justify-content-center" role="button" type="button" data-toggle="side-menu">
        <svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2.5" y="6" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="11" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="16" width="20" height="2" fill="#1633AB"></rect></svg>
      </a>
    </div>
    <div class="navbar-menu">
      <div class="navbar-end">
        <ul class="navbar-item">
          <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">About</a></li>
          <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">Company</a></li>
          <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">Services</a></li>
          <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">Testimonials</a></li>
        </ul>
        <div class="navbar-item"><a class="button is-outlined is-primary" href="#">Sign Up</a></div>
      </div>
    </div>
  </nav>

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

Bulma Component #204

<section class="section py-24">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column is-6">
        <div class="has-mw-sm mx-auto">
          <h2 class="title is-size-3 has-leading-3 has-text-primary">Lorem ipsum dolor sit amet consectutar</h2>
          <p class="subtitle is-size-5 mt-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        </div>
      </div>
      <div class="column is-6">
        <div class="columns is-multiline">
          <div class="column is-4">
            <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-4 has-background-light" style="height: 140px;">
              <img class="image mx-auto" src="bendis-assets/logos/slack-color.svg" alt="">
            </div>
          </div>
          <div class="column is-4">
            <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-4 has-background-light" style="height: 140px;">
              <img class="image mx-auto" src="bendis-assets/logos/dropbox-color.svg" alt="">
            </div>
          </div>
          <div class="column is-4">
            <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-4 has-background-light" style="height: 140px;">
              <img class="image mx-auto" src="bendis-assets/logos/spotify-color.svg" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #205

<div>
  <nav class="is-relative navbar py-2 has-background-white">
    <div class="container">
      <div class="navbar-brand is-align-items-center">
        <a class="navbar-item" href="#">
          <span class="navbar-item px-0 title is-size-5 has-text-dark">
            <img src="bendis-assets/logos/bendis-blue.svg" alt="" style="max-height: initial;">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger is-hidden-desktop is-flex is-align-items-center is-justify-content-center" role="button" type="button" data-toggle="side-menu">
          <svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2.5" y="6" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="11" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="16" width="20" height="2" fill="#1633AB"></rect></svg>
        </a>
      </div>
      <div class="is-hidden-mobile is-hidden-tablet-only is-absolute" style="top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);">
        <ul class="navbar-item">
          <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">About</a></li>
          <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">Company</a></li>
          <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">Services</a></li>
          <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="navbar-menu">
        <div class="navbar-end">
          <div class="navbar-item is-hidden-mobile">

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

Bulma Component #206

<div>
  <nav class="navbar py-2 has-background-white">
    <div class="container">
      <div class="navbar-brand is-align-items-center">
        <a class="navbar-item" href="#">
          <span class="navbar-item px-0 title is-size-5 has-text-dark">
            <img src="bendis-assets/logos/bendis-blue.svg" alt="" style="max-height: initial;">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger is-hidden-desktop is-flex is-align-items-center is-justify-content-center" role="button" type="button" data-toggle="side-menu">
          <svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2.5" y="6" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="11" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="16" width="20" height="2" fill="#1633AB"></rect></svg>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-end">
          <div class="navbar-item">
            <button class="navbar-menu-open button is-ghost p-0">
              <svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2.5" y="6" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="11" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="16" width="20" height="2" fill="#1633AB"></rect></svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </nav>

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

Bulma Component #207

<div>
  <nav class="navbar py-2 has-background-white">
    <div class="is-relative container">
      <div class="navbar-brand is-align-items-center is-flex-grow-1">
        <a class="navbar-item" href="#">
          <span class="navbar-item px-0 title is-size-5 has-text-dark">
            <img src="bendis-assets/logos/bendis-blue.svg" alt="" style="max-height: initial;">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger is-hidden-desktop is-flex is-align-items-center is-justify-content-center" role="button" type="button" data-toggle="side-menu">
          <svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2.5" y="6" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="11" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="16" width="20" height="2" fill="#1633AB"></rect></svg>
        </a>
      </div>
      <div class="is-hidden-mobile is-hidden-tablet-only is-absolute" style="top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);">
        <a class="navbar-menu-open navbar-burger is-flex is-align-items-center is-justify-content-center" role="button" type="button" data-toggle="side-menu">
          <svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2.5" y="6" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="11" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="16" width="20" height="2" fill="#1633AB"></rect></svg>
        </a>
      </div>
      <div class="navbar-menu is-hidden-mobile">
        <div class="navbar-end"><a class="navbar-item" href="#">Sign In</a><a class="navbar-item" href="#">Support</a></div>
      </div>
    </div>
  </nav>
  <div class="is-hidden navbar-side is-fixed is-top-0 is-bottom-0 is-left-0 has-mw-md" style="width: 75%; z-index: 9999;">

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

Bulma Component #208

<div>
  <nav class="navbar py-2 has-background-white">
    <div class="is-relative container">
      <div class="navbar-brand is-align-items-center">
        <a class="navbar-item" href="#">
          <span class="navbar-item px-0 title is-size-5 has-text-dark">
            <img src="bendis-assets/logos/bendis-blue.svg" alt="" style="max-height: initial;">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger is-hidden-desktop is-flex is-align-items-center is-justify-content-center" role="button" type="button" data-toggle="side-menu">
          <svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2.5" y="6" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="11" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="16" width="20" height="2" fill="#1633AB"></rect></svg>
        </a>
      </div>
      <div class="is-hidden-mobile is-hidden-tablet-only is-absolute" style="top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);">
        <ul class="navbar-item">
          <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">About</a></li>
          <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">Company</a></li>
          <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">Services</a></li>
          <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="navbar-menu">
        <div class="navbar-end">
          <div class="navbar-item has-mw-xs">

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

Bulma Component #209

<div class="is-relative">
  <nav class="navbar py-2 has-background-white">
    <div class="is-relative container">
      <div class="navbar-brand is-align-items-center is-flex-grow-1">
        <a class="navbar-item" href="#">
          <svg width="22" height="23" viewbox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M21.7973 20.0329L16.4361 14.4698C18.7112 10.9317 18.2607 6.22982 15.3549 3.22712C13.7105 1.55119 11.548 0.620117 9.22781 0.620117C6.90764 0.620117 4.74515 1.55119 3.12329 3.22712C-0.233072 6.71863 -0.233072 12.3749 3.12329 15.8431C6.02913 18.8458 10.5794 19.3114 14.0033 16.9837L19.387 22.5468C19.6348 22.8029 20.0628 22.8029 20.3106 22.5468L21.7973 21.0106C22.0676 20.7313 22.0676 20.289 21.7973 20.0329ZM13.3726 13.818C11.0975 16.169 7.38069 16.169 5.08304 13.818C2.80793 11.4671 2.80793 7.62643 5.08304 5.2522C7.35816 2.90124 11.0749 2.90124 13.3726 5.2522C15.6477 7.62643 15.6477 11.4671 13.3726 13.818Z" fill="#1633AB"></path>
          </svg>
        </a>
        <a class="navbar-menu-open navbar-burger is-hidden-desktop is-flex is-align-items-center is-justify-content-center" role="button" type="button" data-toggle="side-menu">
          <svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2.5" y="6" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="11" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="16" width="20" height="2" fill="#1633AB"></rect></svg>
        </a>
      </div>
      <div class="is-absolute" style="top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);">
        <a class="navbar-item" href="#">
          <span class="navbar-item px-0 title is-size-5 has-text-dark">
            <img src="bendis-assets/logos/bendis-blue.svg" alt="" style="max-height: initial;">
          </span>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-end">
          <a class="navbar-menu-open navbar-burger is-flex is-align-items-center is-justify-content-center" role="button" type="button" data-toggle="side-menu">
            <svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2.5" y="6" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="11" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="16" width="20" height="2" fill="#1633AB"></rect></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

Bulma Component #210

<div>
  <nav class="navbar py-2 has-background-white">
    <div class="is-relative container">
      <div class="navbar-brand is-align-items-center">
        <a class="navbar-item" href="#">
          <span class="navbar-item px-0 title is-size-5 has-text-dark">
            <img src="bendis-assets/logos/bendis-blue.svg" alt="" style="max-height: initial;">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger is-hidden-desktop is-flex is-align-items-center is-justify-content-center" role="button" type="button" data-toggle="side-menu">
          <svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2.5" y="6" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="11" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="16" width="20" height="2" fill="#1633AB"></rect></svg>
        </a>
      </div>
      <div class="is-hidden-mobile is-hidden-tablet-only is-absolute" style="top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);">
        <ul class="navbar-item">
          <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">About</a></li>
          <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">Company</a></li>
          <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">Services</a></li>
          <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="navbar-menu is-hidden-mobile">
        <div class="navbar-end">
          <a class="navbar-item" href="#">Sign In</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

Bulma Component #211

<div>
  <nav class="navbar py-2 has-background-white">
    <div class="container">
      <div class="navbar-brand is-align-items-center">
        <a class="navbar-item" href="#">
          <span class="navbar-item px-0 title is-size-5 has-text-dark">
            <img src="bendis-assets/logos/bendis-blue.svg" alt="" style="max-height: initial;">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger is-hidden-desktop is-flex is-align-items-center is-justify-content-center" role="button" type="button" data-toggle="side-menu">
          <svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2.5" y="6" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="11" width="20" height="2" fill="#1633AB"></rect><rect x="2.5" y="16" width="20" height="2" fill="#1633AB"></rect></svg>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-end">
          <ul class="navbar-item">
            <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">About</a></li>
            <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">Company</a></li>
            <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">Services</a></li>
            <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">Testimonials</a></li>
          </ul>
          <div class="navbar-item"><a class="button is-outlined is-primary" href="#">Sign Up</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

1
...
8
9
10
11

The easiest way to create beautiful websites

Solo 1 account

Company 5 accounts

monthly

$24/month

That's $0.80/day

annual

$99/year

That's $0.27/day

Last chance

lifetime

$249/paid once

Best value

monthly

$48/month

That's $1.60/day

for 5 accounts

annual

$198/year

That's $0.54/day

for 5 accounts

Lifetime License

Create an account

OR USE EMAIL

I agree to the terms of use and privacy policy.

VAT included where applicable. Invoices provided.

Why creators choose Shuffle

From idea to beautiful design in minutes.

Shuffle pairs an AI visual editor with 80+ UI libraries, so you can design, build and export production‑ready code without starting from scratch.

An AI Agent that builds with you Describe a page, watch it come to life, then fine-tune it visually or with a prompt.
Pick the best model for every task GPT-6 Astra, Claude Opus 5.5 and Gemini 4 Argon in one place.
13,400+ professionally designed components Prefer building by hand? Drag in pixel-perfect sections crafted by professional designers.
Export to the stack you love Next.js, Astro, Laravel, WordPress, Shopify, static HTML and beyond.

“Its AI-powered features have transformed how I work! Designing and building websites has become faster, easier, and far more efficient.”

Est. 2019

Helping web builders ship since 2019 7 years of steady development.

Build websites faster with an AI Visual Editor

Products

Extensions

UI Components

Company

Support

© 2026 Shuffle. All rights reserved.