Bulma 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

Bulma Component #1121

Bulma

Bendis

<div class="is-relative">
  <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="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="6" width="20" height="2" fill="#1633AB"></rect><rect x="2" y="11" width="20" height="2" fill="#1633AB"></rect><rect x="2" 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="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="6" width="20" height="2" fill="#1633AB"></rect><rect x="2" y="11" width="20" height="2" fill="#1633AB"></rect><rect x="2" y="16" width="20" height="2" fill="#1633AB"></rect></svg>
          </button>
        </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;">
    <div class="navbar-backdrop is-fixed is-inset-0 has-background-dark" style="opacity: 75%; z-index: 50;"></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 #1122

Bulma

Bendis

<section class="section py-24">
  <div class="container">
    <h3 class="is-size-5 has-text-centered has-text-grey mb-8">Trusted by brands all over the world</h3>
    <div class="columns is-multiline">
      <div class="column is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 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-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 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-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-light" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/spotify-color.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-light" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/amazon-color.svg" alt="">
        </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

Bulma Component #1123

Bulma

Bendis

<div class="is-relative has-background-white">
  <nav class="is-relative navbar py-2 has-background-transparent">
    <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>
  </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;">
    <div class="navbar-backdrop is-fixed is-inset-0 has-background-dark" style="opacity: 75%; z-index: 50;"></div>
    <aside class="menu is-relative is-flex is-flex-direction-column py-8 px-10 has-background-white" style="width: 100%; height: 100%; z-index: 50; overflow-y: auto;">

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

Bulma

Bendis

<section class="section py-24 has-background-primary">
  <div class="container">
    <div class="has-mw-2xl mx-auto mb-10 has-text-centered">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-5">Lorem ipsum</span>
      <h2 class="title is-size-3 has-leading-3 has-text-white">Lorem ipsum dolor sit amet consectutar</h2>
      <p class="subtitle is-size-5 has-leading-4 has-text-light mt-5">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>
    <div class="columns is-multiline">
      <div class="column is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-primary-dark" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/slack-light-blue.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-primary-dark" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/dropbox-light-blue.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-primary-dark" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/spotify-light-blue.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-widescreen">

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

Bulma

Bendis

<section class="section py-24">
  <div class="container">
    <div class="has-mw-2xl mx-auto mb-10 has-text-centered">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-5">Lorem ipsum</span>
      <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">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>
    <div class="columns is-multiline">
      <div class="column is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 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-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 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-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-light" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/spotify.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-widescreen">

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

Bulma

Bendis

<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">
      <div class="navbar-end">
        <div class="navbar-item has-mw-xs has-mw-none-fullhd">
          <div class="field has-addons">

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

Bulma

Bendis

<section class="section py-24">
  <div class="container">
    <div class="has-mw-2xl mx-auto mb-10 has-text-centered">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-5">Lorem ipsum</span>
      <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">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>
    <div class="columns is-multiline">
      <div class="column is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 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-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 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-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-light" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/spotify-color.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-widescreen">

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

Bulma

Bendis

<div>
  <nav class="is-relative navbar py-2 has-background-white">
    <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>
        </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 #1129

Bulma

Bendis

<section class="section py-24 has-background-primary">
  <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-white">Lorem ipsum dolor sit amet consectutar</h2>
          <p class="subtitle is-size-5 has-leading-4 has-text-light 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-primary-dark" style="height: 140px;">
              <img class="image mx-auto" src="bendis-assets/logos/slack-light-blue.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-primary-dark" style="height: 140px;">
              <img class="image mx-auto" src="bendis-assets/logos/dropbox-light-blue.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-primary-dark" style="height: 140px;">
              <img class="image mx-auto" src="bendis-assets/logos/spotify-light-blue.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 #1130

Bulma

Bendis

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

Bulma

Bendis

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

Bulma

Bendis

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

Bulma

Bendis

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

Bulma

Bendis

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

Bulma

Bendis

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

Bulma

Bendis

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

Bulma

Bendis

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

Bulma

Bendis

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

Bulma

Bendis

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

Bulma

Bendis

<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

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

Bulma Component #1121

Get the code for 13,400+ components

Bulma Component #1122

Get the code for 13,400+ components

Bulma Component #1123

Get the code for 13,400+ components

Bulma Component #1124

Get the code for 13,400+ components

Bulma Component #1125

Get the code for 13,400+ components

Bulma Component #1126

Get the code for 13,400+ components

Bulma Component #1127

Get the code for 13,400+ components

Bulma Component #1128

Get the code for 13,400+ components

Bulma Component #1129

Get the code for 13,400+ components

Bulma Component #1130

Get the code for 13,400+ components

Bulma Component #1131

Get the code for 13,400+ components

Bulma Component #1132

Get the code for 13,400+ components

Bulma Component #1133

Get the code for 13,400+ components

Bulma Component #1134

Get the code for 13,400+ components

Bulma Component #1135

Get the code for 13,400+ components

Bulma Component #1136

Get the code for 13,400+ components

Bulma Component #1137

Get the code for 13,400+ components

Bulma Component #1138

Get the code for 13,400+ components

Bulma Component #1139

Get the code for 13,400+ components

Bulma Component #1140

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