<section class="hero is-info is-bold">
<div class="hero-body">
<div class="container">

  <h1 class="title">Boxes!</h1>
  <div class="columns">
    <div class="column">
      <div class="box">.box</div>
    </div>
    <div class="column">
      <div class="box">.box</div>
    </div>
    <div class="column">
      <div class="box">.box</div>
    </div>
    <div class="column">
      <div class="box">.box</div>
    </div>
  </div>

</div>
</div>
</section>

<section class="hero is-light is-bold">
<div class="hero-body">
<div class="container">

  <h1 class="title">Buttons!</h1>
  <div class="columns">
    <div class="column">
      <a href="#" class="button is-danger is-large">Large Red</a>
    </div>
    <div class="column">
      <a href="#" class="button is-info is-large is-loading">Loading</a>
    </div>
    <div class="column">
      <a href="#" class="button is-info is-large is-outlined">Outlined</a>
    </div>
    <div class="column">
      <a href="#" class="button is-info is-large is-inverse">Inverse</a>
    </div>
  </div>

</div>
</div>
</section>

<section class="hero is-dark is-bold">
<div class="hero-body">
<div class="container">

  <h1 class="title">Progress!</h1>
  <progress class="progress is-primary" value="30" max="100">30%</progress>
  <progress class="progress is-info" value="45" max="100">45%</progress>
  <progress class="progress is-success" value="60" max="100">60%</progress>
  <progress class="progress is-warning" value="75" max="100">75%</progress>
  <progress class="progress is-danger" value="90" max="100">90%</progress>

</div>
</div>
</section>
.box {
  color: #333;
}
View Compiled
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.