Search code examples
cssbulma

Why childs inside Columns class display in single line?

I'm developing a web using Bulma framework .

When i put column classed tag inside columns , all of child tags displayed in one raw and overflowed from page !

I want break raw when arrived end of columns tag .

What's my wrong ?

This is my code : 

<div class="box">
  <div class="columns is-parent">
    <?php foreach($posts as $post) {?>
    <div class="column is-one-fifth is-child">
      <div class="card">
            <div class="card-image">
              <figure class="image is-4by3"> <img src="" alt="Image"> </figure>
            </div>
            <div class="card-content">
              <div class="content">
                <div class="card-title has-text-link"><?php echo $post->title; ?></div>
                <small><?php echo strip_tags(word_limiter($post->content,50)); ?></small>
                <a>#css</a>
                <a>#responsive</a>
                <br> <small>11:09 PM - 1 Jan 2016</small>
              </div>
            </div>
          </div>
        </div>
      <?php } ?>
  </div>
</div>

enter image description here

Solution

  • I added only is-multiline to parent tag :

    <div class="columns is-parent is-multiline" >

    Problem Solved