Bulma Centered level

Bulma is a free, open-source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior. It uses classes to create beautiful designs.

Bulma Centered Level is used to level the items in the center. To center the level, we use a has-text-centered class. In this article, we will discuss Bulma Centered Level.

Bulma Centered Level Classes:

level: A multi purpose horizontal level. This class is used to create the level.
level-item: This class is used to create the level item.
has-text-centered: This class is used to center the level.

Syntax:

<nav class="level">
  <div class="level-item has-text-centered">
     ....
  </div>
  ....
</nav>

Example 1: The following code demonstrates the Bulma Centered Level on the big screen.

HTML

<!DOCTYPE html> 

<html> 

<head> 

  <title> Bulma Centered Level </title> 

  <link rel='stylesheet'

        href= 

'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 

</head> 

<body> 

  <div class="has-text-centered"> 

    <h1 class="title has-text-success"> 

      GeeksforGeeks 

    </h1> 

    <h3 class="subtitle">  

      Bulma Centered Level  

    </h3> 

  </div> 

  <br> <br> 

  <nav class="level"> 

    <div class="level-item "> 

      <div> 

        <button class='button is-success'> 

          GeeksforGeeks 1 

        </button> 

      </div> 

    </div> 

    <div class="level-item "> 

      <div> 

        <button class='button is-success'> 

          GeeksforGeeks 2 

        </button> 

      </div> 

    </div> 

    <div class="level-item "> 

      <div> 

        <button class='button is-success'> 

          GeeksforGeeks 3 

        </button> 

      </div> 

    </div> 

    <div class="level-item "> 

      <div> 

        <button class='button is-success'> 

          GeeksforGeeks 4 

        </button> 

      </div> 

    </div> 

  </nav> 

</body> 

</html>

Output:

Bulma Centered Level on the big screen

Example 2: The following code demonstrates the Bulma Centered Level on the small screen.

HTML

<!DOCTYPE html> 

<html> 

<head> 

  <title> Bulma Centered Level </title> 

  <link rel='stylesheet' href= 

'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 

</head> 

<body> 

  <div class="has-text-centered"> 

    <h1 class="title has-text-success"> 

      GeeksforGeeks 

    </h1> 

    <h3 class="subtitle">  

      Bulma Centered Level  

    </h3> 

  </div> 

  <br> <br> 

  <nav class="level"> 

    <div class="level-item "> 

      <div> 

        <button class='button is-warning'> 

          GFG 1 

        </button> 

      </div> 

    </div> 

    <div class="level-item "> 

      <div> 

        <button class='button is-warning'> 

          GFG 2 

        </button> 

      </div> 

    </div> 

    <div class="level-item "> 

      <div> 

        <button class='button is-warning'> 

          GFG 3 

        </button> 

      </div> 

    </div> 

    <div class="level-item "> 

      <div> 

        <button class='button is-warning'> 

          GFG 4 

        </button> 

      </div> 

    </div> 

    <div class="level-item "> 

      <div> 

        <button class='button is-warning'> 

          GFG 5 

        </button> 

      </div> 

    </div> 

    <div class="level-item "> 

      <div> 

        <button class='button is-warning'> 

          GFG 6 

        </button> 

      </div> 

    </div> 

  </nav> 

</body> 

</html>