The structure of a level is the following:
level
: main container
level-left
for the left side
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 .
<!-- 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>
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 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>
<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= "https://versions.bulma.io/0.7.4/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>
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 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>