Bulma Hello World 

Bulma Hello World 


Click on RUN button to see the output

Bulma online editor

Write, Run & Share Bulma css code online using OneCompiler's Bulma online editor for free. It's one of the robust, feature-rich online editor for Bulma css. Getting started with the OneCompiler's Bulma online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'Bulma' and start writing code to learn and test online instantly.

About Bulma

Bulma is a free open-source CSS framework for front-end web development. It helps developers to develop websites faster and also easy to use. You can use built-in classes which are available hence you don't need to develop elements from scratch.

Syntax help

Modifiers

Color classesSize classesState classes
.is-primary.is-small.is-outlined
.is-link.is-medium.is-loading
.is-info.is-large
.is-success
.is-warning
.is-danger

Typography helpers

ClassSize
.is-size-13rem
.is-size-22.5rem
.is-size-32rem
.is-size-41.5rem
.is-size-51.25rem
.is-size-61rem
.is-size-70.75rem
ClassDescription
.has-text-centeredMakes the text centered
.has-text-justifiedMakes the text justified
.has-text-leftMakes the text align to the left
.has-text-rightMakes the text align to the right
.is-capitalizedTransforms the first character of each word to uppercase
.is-lowercaseTransforms all characters to lowercase
.is-uppercaseTransforms all characters to uppercase

Breadcrumbs

<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Bulma</a></li>
    <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
  </ul>
</nav>

Dropdown

<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Dropdown button</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item"> Dropdown item </a>
      <a class="dropdown-item"> Other dropdown item </a>
      <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
      <a href="#" class="dropdown-item"> Other dropdown item </a>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item"> With a divider </a>
    </div>
  </div>
</div>

Menu

<aside class="menu">
  <p class="menu-label">
    General
  </p>
  <ul class="menu-list">
    <li><a>Dashboard</a></li>
    <li><a>Customers</a></li>
  </ul>
</aside>

Modal

<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <!-- Any other Bulma elements you want -->
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

Tabs

<div class="tabs">
  <ul>
    <li class="is-active"><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
  </ul>
</div>

Form

<div class="field">
  <label class="label">Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="e.g Alex Smith">
  </div>
</div>

<div class="field">
  <label class="label">Email</label>
  <div class="control">
    <input class="input" type="email" placeholder="e.g. [email protected]">
  </div>
</div>