Bulma Level

The Level component is a versatile layout tool in Bulma that helps you create horizontally or vertically distributed content with equal spacing between elements. It's perfect for creating navigation bars, stats displays, or any content that needs balanced distribution.

Basic Level

The basic level creates a horizontal distribution where all items are evenly spaced and centered vertically.

<button class="button is-primary">Click me</button>
<div class="notification is-success">
  <button class="delete"></button>
  Success! Your code is working.
</div>

Code:

<!-- Basic Level -->
<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>
</nav>

Level Parts

A level component consists of three main parts:

1. Level Left

Items aligned to the left side.

<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>
  
  <!-- Right side -->
  <div class="level-right">
    <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>
</nav>

2. Level Right

Items aligned to the right side.

3. Level Item

Individual items within the level.

Level with Left and Right

<nav class="level">
  <!-- Left side with multiple items -->
  <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">
    <div class="level-item">
      <button class="button is-success">New Post</button>
    </div>
  </div>
</nav>

Vertical Level

Add .is-mobile modifier to stack level items vertically on mobile devices.

<!-- Mobile responsive level -->
<nav class="level is-mobile">
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Revenue</p>
      <p class="title">$9,876</p>
    </div>
  </div>
  
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Orders</p>
      <p class="title">456</p>
    </div>
  </div>
</nav>

Level with Form Elements

<nav class="level">
  <div class="level-left">
    <div class="level-item">
      <div class="field">
        <label class="label">Filter by:</label>
        <div class="control">
          <div class="select">
            <select>
              <option>All Categories</option>
              <option>Technology</option>
              <option>Business</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="level-right">
    <div class="level-item">
      <div class="field has-addons">
        <p class="control">
          <input class="input" type="text" placeholder="Search...">
        </p>
        <p class="control">
          <button class="button is-info">
            <span class="icon">
              <i class="fas fa-search"></i>
            </span>
          </button>
        </p>
      </div>
    </div>
  </div>
</nav>

Level with Icons

<nav class="level">
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">
        <span class="icon has-text-primary">
          <i class="fas fa-eye"></i>
        </span>
        Views
      </p>
      <p class="title">1.2K</p>
    </div>
  </div>
  
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">
        <span class="icon has-text-success">
          <i class="fas fa-heart"></i>
        </span>
        Likes
      </p>
      <p class="title">456</p>
    </div>
  </div>
</nav>

Nested Levels

You can nest levels for more complex layouts.

<!-- Nested level -->
<div class="level">
  <div class="level-left">
    <div class="level-item">
      <h2 class="title is-4">Dashboard</h2>
    </div>
  </div>
  
  <div class="level-right">
    <div class="level">
      <div class="level-item">
        <span class="tag is-info">Today</span>
      </div>
      <div class="level-item">
        <button class="button is-small">Export</button>
      </div>
    </div>
  </div>
</div>

Responsive Behavior

Level components are fully responsive. Use these modifiers:

Use Cases

1. Stats Dashboard

<nav class="level">
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Users</p>
      <p class="title">3,456</p>
      <p class="subtitle has-text-success">
        <span class="icon">
          <i class="fas fa-arrow-up"></i>
        </span>
        12%
      </p>
    </div>
  </div>
  
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Revenue</p>
      <p class="title">$12,345</p>
      <p class="subtitle has-text-danger">
        <span class="icon">
          <i class="fas fa-arrow-down"></i>
        </span>
        5%
      </p>
    </div>
  </div>
</nav>

2. Toolbar/Navigation

<nav class="level">
  <div class="level-left">
    <div class="level-item">
      <button class="button is-light">
        <span class="icon">
          <i class="fas fa-arrow-left"></i>
        </span>
        <span>Back</span>
      </button>
    </div>
  </div>
  
  <div class="level-right">
    <div class="level-item">
      <button class="button is-primary">Save</button>
    </div>
    <div class="level-item">
      <button class="button is-light">Cancel</button>
    </div>
  </div>
</nav>

3. Profile Stats

<nav class="level is-mobile">
  <div class="level-item has-text-centered">
    <div>
      <p class="title">156</p>
      <p class="heading">Posts</p>
    </div>
  </div>
  
  <div class="level-item has-text-centered">
    <div>
      <p class="title">2.3K</p>
      <p class="heading">Followers</p>
    </div>
  </div>
  
  <div class="level-item has-text-centered">
    <div>
      <p class="title">345</p>
      <p class="heading">Following</p>
    </div>
  </div>
</nav>

Custom Styling

You can customize the level component with additional CSS.

Adding Borders

<!-- Custom CSS -->
<style>
  .level-bordered .level-item {
    border-right: 1px solid #ddd;
    padding: 0 20px;
  }
  
  .level-bordered .level-item:last-child {
    border-right: none;
  }
</style>

<!-- Usage -->
<nav class="level level-bordered">
  <div class="level-item has-text-centered">
    <!-- Content -->
  </div>
</nav>

Vertical Level

<!-- Vertical level with custom CSS -->
<style>
  .level-vertical {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .level-vertical .level-item {
    margin-bottom: 1rem;
  }
</style>

<nav class="level level-vertical">
  <div class="level-item">
    <!-- Content -->
  </div>
</nav>

Best Practices

1. When to Use Level

• For evenly distributing stats or metrics
• Creating navigation bars with balanced elements
• Building dashboard widgets
• Displaying profile information
• Creating toolbars with left/right alignment

2. When Not to Use Level

• For complex grid layouts (use Columns instead)
• When you need precise control over item widths
• For form layouts (use Form components)
• When items need different vertical alignment

3. Accessibility Tips

• Use semantic HTML elements when appropriate
• Ensure sufficient color contrast in level items
• Add ARIA labels for screen readers when needed
• Test keyboard navigation through level items

Try It Yourself

Experiment with the Level component:

<button class="button is-primary">Click me</button>
<div class="notification is-success">
  <button class="delete"></button>
  Success! Your code is working.
</div>

Up next: Bulma Media Object Component