Bulma Grid Layout Columns Extend Over Viewport

Using Bulma CSS framework.

I am trying to layout some elements and I am not sure why on a desktop view, the items once they go past the view port does not go to the next row.

Here's a sample code and corresponding link to a JS Bin:

 <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.min.css">
      <title>JS Bin</title>
    </head>
    <body>
      <div class="columns">
        <div class="column is-one-quarter">
          Col 1
        </div>
        <div class="column is-one-quarter">
          Col 2
        </div>
        <div class="column is-one-quarter">
          Col 3
        </div>
        <div class="column is-one-quarter">
          Col 4
        </div>
        <div class="column is-one-quarter">
          Col 5
        </div>
      </div>
      <div class="columns">
        <div class="column is-4">
          column is-4
        </div>
        <div class="column is-4">
          column is-4
        </div>
        <div class="column is-4">
          column is-4
        </div>
        <div class="column is-4">
          column is-4
        </div>
        <div class="column is-4">
          column is-4
        </div>
      </div>
    </body>
    </html>

I've created a simple JS Bin to illustrate the problem.

http://jsbin.com/juquzexezu/edit?html,output

Notice that when you widen the output window, you would see that Col-5 div on the first row is not shown, as well as on the second row, the two remaining div elements are also not being displayed.

What I am looking for is to have those missing div elements automatically go to the next row when the horizontal view is already filled.

Recommended topics

Hot tags