How to make tiles wrap with Bulma CSS

Question

I'm using the Bulma CSS framework with a Rails app. I have a long list of items and would like to display them in tiles. However, the tiles run off the screen instead of wrapping to the next line.

The Bulma Documentation doesn't address this issue. Since I am creating the tiles dynamically from a variable-length list, explicit nesting as described in their docs isn't so easy and I'd rather have it cleanly wrap to the next line.

Here's what my code basically looks like:

<div class="tile is-ancestor">
  <div class="tile is-parent">
    <% @my_list.each do |item| %>
        <div class="tile is-child box">
          <p><%= item %></p>
        </div>
    <% end %>
  </div>
</div>

Since Bulma is based on flexbox, I would think there is some equivalent to flex-wrap: wrap;, but I couldn't find this option yet.

---

Update: It's possible to add the style flex-wrap: wrap;to the parent-container, but is there a Bulma-integrated class flag?

Goggler

I just stumbled on this exact issue, and your solution of applying the flex wrap to the parent container worked for me. I think you should make it an answer and accept it. I looked through the docs and could not find any class flag. – Thibeault

Hei @MForMarlon, thanks for checking up more and for the comment. Okay, I can do that :) – Goggler

Answer 1

It seems that there is currently no class-flag in Bulma addressing this directly.

However, since Bulma is based on flexbox, it is possible to add the style flex-wrap: wrap; to the parent container to achieve the desired outcome.

Goggler

Answer 2

For the gridsystem Bulma does have a class for this.

If you add is-multiline to your .columns element it should wrap automatically. (adds flex-wrap: wrap; under the hood)

Source: Bulma column docs

(Not sure how this applies to tiles, but you could always wrap them into columns)

Glasscock

Answer 3

The DevTools inspector shows that Bulma's box p has a default style of white-space: nowrap.

Applying style="white-space: normal!important;" directly onto the <p> tag forced it to wrap as normal and fixed the problem for me.

Ricard