← Back to home

Layout

Columns (.columns / .column)

Column 1
Column 2
Column 3
is-3
is-6
is-3
4
4
4
<div class="columns">
  <div class="column"><div class="demo-block">Column 1</div></div>
  <div class="column"><div class="demo-block">Column 2</div></div>
  <div class="column"><div class="demo-block">Column 3</div></div>
</div>
<div class="columns">
  <div class="column is-3"><div class="demo-block">is-3</div></div>
  <div class="column is-6"><div class="demo-block">is-6</div></div>
  <div class="column is-3"><div class="demo-block">is-3</div></div>
</div>
<div class="columns is-multiline">
  <div class="column is-4"><div class="demo-block">4</div></div>
  <div class="column is-4"><div class="demo-block">4</div></div>
  <div class="column is-4"><div class="demo-block">4</div></div>
</div>

Container (.container)

This content is centered with automatic margins.
<div class="container">
  This content is centered with automatic margins.
</div>

Hero (.hero)

Main Hero

Hero subtitle

Medium Hero

<div class="hero">
  <div class="hero-body">
    <h1 class="title">Main Hero</h1>
    <p class="subtitle">Hero subtitle</p>
  </div>
</div>
<div class="hero is-medium">
  <div class="hero-body">
    <h2 class="title">Medium Hero</h2>
  </div>
</div>

Section (.section)

Normal section (3rem vertical padding)
Medium section
<div class="section">
  Normal section (3rem vertical padding)
</div>
<div class="section is-medium">
  Medium section
</div>

Level (.level)

Left
Item 1
Item 2
Item 3
<div class="level">
  <div class="level-left">
    <div class="level-item"><strong>Left</strong></div>
  </div>
  <div class="level-right">
    <div class="level-item">
      <button class="button is-primary">Action</button>
    </div>
  </div>
</div>
<div class="level is-mobile">
  <div class="level-item">Item 1</div>
  <div class="level-item">Item 2</div>
  <div class="level-item">Item 3</div>
</div>