--- layout: documentation doc-tab: layout doc-subtab: level --- {% capture nav_example %} {% endcapture %} {% capture nav_centered_example %} {% endcapture %} {% capture nav_centered_bis_example %} {% endcapture %} {% capture nav_mobile_example %} {% endcapture %} {% include subnav-layout.html %}

Level

A multi-purpose horizontal level, which can contain almost any other element


The structure of a level is the following:

  • level: main container
    • level-left for the left side. This element is required, even if it is empty
    • level-right for the right side
      • level-item for each individual element

In a level-item, you can then insert almost anything you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma level, they will always be vertically centered.

{{nav_example}}
{% highlight html %}{{nav_example}}{% endhighlight %} {% include anchor.html name="Centered level" %}
If you want a centered level, you can use as many level-item as you want, as long as they are direct children of the level container.
{{nav_centered_example}}
{% highlight html %}{{nav_centered_example}}{% endhighlight %}
{{nav_centered_bis_example}}
{% highlight html %}{{nav_centered_bis_example}}{% endhighlight %} {% include anchor.html name="Mobile level" %}
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 is-mobile modifier on the level container.
{{nav_mobile_example}}
{% highlight html %}{{nav_mobile_example}}{% endhighlight %}