--- title: Level layout: documentation doc-tab: layout doc-subtab: level breadcrumb: - home - documentation - layout - layout-level --- {% capture nav_example %} {% endcapture %} {% capture nav_centered_example %} {% endcapture %} {% capture nav_centered_bis_example %} {% endcapture %} {% capture nav_mobile_example %} {% endcapture %}

The structure of a level is the following:

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.

{% include elements/snippet.html content=nav_example horizontal=true more=true %} {% include elements/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.
{% include elements/snippet.html content=nav_centered_example horizontal=true more=true %} {% include elements/snippet.html content=nav_centered_bis_example horizontal=true more=true %} {% include elements/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.
{% include elements/snippet.html content=nav_mobile_example horizontal=true more=true %}