Bulma Mobile Level

Last Updated : 06 Apr, 2022

Bulma is an open-source CSS framework based on flexbox that can be used to make your web development faster as it comes with pre-built components and elements.

In this article, we will be seeing Bulma Mobile Level.

A level in Bulma is a multipurpose horizontal level that can contain any element inside it. All the elements inside the level are vertically centered. On mobile devices, for better readability, the items inside the level are vertical on mobile devices but this behavior can be changed by using the is-mobile modifier provided by Bulma.

Bulma Mobile Level Classes:

is-mobile: This class is used on the level element to make it horizontal on mobile devices.

Syntax:

<nav class="level is-mobile">
    ...
</nav>

Example: The below example shows the level element with and without the is-mobile modifier.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Mobile Level</title> 
    <link rel='stylesheet' href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
  
    <style> 
        .container>p { 
            margin-top: 25px; 
            margin-bottom: 10px; 
        } 
    </style> 
</head> 
  
<body class="has-text-centered"> 
    <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> 
    <b>Bulma Mobile Level</b> 
    <div class="container is-fluid"> 
        <p><b>Level with <i>is-mobile</i> modifier.</b></p> 
        <nav class="level is-mobile"> 
            <div class="level-item"> 
                <div class="notification is-primary"> 
                    Item 1 
                </div> 
            </div> 
            <div class="level-item has-text-centered"> 
                <div class="notification is-primary"> 
                    Item 2 
                </div> 
            </div> 
            <div class="level-item has-text-centered"> 
                <div class="notification is-primary"> 
                    Item 3 
                </div> 
            </div> 
        </nav> 
  
        <p><b>Level without <i>is-mobile</i> modifier.</b></p> 
        <nav class="level"> 
            <div class="level-item"> 
                <div class="notification is-primary"> 
                    Item 1 
                </div> 
            </div> 
            <div class="level-item has-text-centered"> 
                <div class="notification is-primary"> 
                    Item 2 
                </div> 
            </div> 
            <div class="level-item has-text-centered"> 
                <div class="notification is-primary"> 
                    Item 3 
                </div> 
            </div> 
        </nav> 
    </div> 
</body> 
  
</html>