bulma/docs/documentation/layout/level.html

---
title: Level
layout: documentation
doc-tab: layout
doc-subtab: level
breadcrumb:
- home
- documentation
- layout
- layout-level
---

{% capture nav_example %}
<!-- Main container -->
<nav class="level">
  <!-- Left side -->
  <div class="level-left">
    <div class="level-item">
      <p class="subtitle is-5">
        <strong>123</strong> posts
      </p>
    </div>
    <div class="level-item">
      <div class="field has-addons">
        <p class="control">
          <input class="input" type="text" placeholder="Find a post">
        </p>
        <p class="control">
          <button class="button">
            Search
          </button>
        </p>
      </div>
    </div>
  </div>

  <!-- Right side -->
  <div class="level-right">
    <p class="level-item"><strong>All</strong></p>
    <p class="level-item"><a>Published</a></p>
    <p class="level-item"><a>Drafts</a></p>
    <p class="level-item"><a>Deleted</a></p>
    <p class="level-item"><a class="button is-success">New</a></p>
  </div>
</nav>
{% endcapture %}

{% capture nav_centered_example %}
<nav class="level">
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Tweets</p>
      <p class="title">3,456</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Following</p>
      <p class="title">123</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Followers</p>
      <p class="title">456K</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Likes</p>
      <p class="title">789</p>
    </div>
  </div>
</nav>
{% endcapture %}

{% capture nav_centered_bis_example %}
<nav class="level">
  <p class="level-item has-text-centered">
    <a class="link is-info">Home</a>
  </p>
  <p class="level-item has-text-centered">
    <a class="link is-info">Menu</a>
  </p>
  <p class="level-item has-text-centered">
    <img src="{{ site.url }}/images/bulma-type.png" alt="" style="height: 30px;">
  </p>
  <p class="level-item has-text-centered">
    <a class="link is-info">Reservations</a>
  </p>
  <p class="level-item has-text-centered">
    <a class="link is-info">Contact</a>
  </p>
</nav>
{% endcapture %}

{% capture nav_mobile_example %}
<nav class="level is-mobile">
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Tweets</p>
      <p class="title">3,456</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Following</p>
      <p class="title">123</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Followers</p>
      <p class="title">456K</p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Likes</p>
      <p class="title">789</p>
    </div>
  </div>
</nav>
{% endcapture %}

<div class="content">
  <p>The <strong>structure</strong> of a level is the following:</p>
  <ul>
    <li>
      <code>level</code>: main container
      <ul>
        <li><code>level-left</code> for the left side
        <li>
          <code>level-right</code> for the right side
          <ul>
            <li><code>level-item</code> for each individual element</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <p>In a <code>level-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma <code>level</code>, they will always be <strong>vertically centered</strong>.</p>
</div>

<div class="bd-structure">
  <nav class="level bd-structure-item bd-is-structure-container" title="level">
    <div class="level-left bd-structure-item" title="level-left">
      <div class="level-item">
        <p class="subtitle is-5">
          <strong>123</strong> posts
        </p>
      </div>
      <div class="level-item">
        <div class="field has-addons">
          <p class="control">
            <input class="input" type="text" placeholder="Find a post">
          </p>
          <p class="control">
            <button class="button">
              Search
            </button>
          </p>
        </div>
      </div>
    </div>
    <div class="level-right bd-structure-item" title="level-right">
      <p class="level-item">
        <strong>All</strong>
      </p>
      <p class="level-item">
        <a>Published</a>
      </p>
      <p class="level-item">
        <a>Drafts</a>
      </p>
      <p class="level-item">
        <a>Deleted</a>
      </p>
      <p class="level-item">
        <a class="button is-success">
          New
        </a>
      </p>
    </div>
  </nav>
</div>

{% include snippet.html content=nav_example horizontal=true more=true %}

{% include anchor.html name="Centered level" %}

<div class="content">
  If you want a <strong>centered level</strong>, you can use as many <code>level-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>level</code> container.
</div>

{% include snippet.html content=nav_centered_example horizontal=true more=true %}

{% include snippet.html content=nav_centered_bis_example horizontal=true more=true %}

{% include anchor.html name="Mobile level" %}

<div class="content">
  By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>level</code> container.
</div>

{% include snippet.html content=nav_mobile_example horizontal=true more=true %}