Bulma Levels vs Containers

user_18649771 0
Viewed 29

The Bulma documentation for Levels puts the level class on a nav element like this: <nav class="level">

Are Bulma Levels intended for navigation bars? If just centering a single image, is it best practice to use a regular Bulma container?

Both ways technically work:

      <div class="container is-flex is-justify-content-center">
        <figure class="image">
          <img src="images/bulma-logo-white.png" style="max-width: 256px;">
        </figure>
      </div>

      <nav class="level">
        <figure class="image level-item ">
          <img src="images/bulma-logo-white.png" style="max-width: 256px;">
        </figure>
      </nav>
bulma
1 Answers

It's a bit unfortunate that all level examples use the nav as the container element. However, it works on divs as well.

The key takeway is:

No matter what elements you put inside a Bulma level, they will always be vertically centered.

So, in case you would want your image vertically centered with another element, the level is your way to go. However, if you just want to have it horizontally centered, as your question suggests, the level is not helpful.

To actually answer your question:

Are Bulma Levels intended for navigation bars?

Yes, and everything that requires vertical alignment. That could be

  • list entries
  • titles with adornments
  • a set of notifications/visualizations with an icon
user_794850
Related