Search code examples
cssbulma

How to create two rows using bulma

I am using bulma, i am new to bulma.

I try to create two rows, but the contents stay side by side, and did not one above the other as expected.

How can i create two rows using bulma ?

I try to use class="row"

This is my code below: 

  <div class="row">
    <h1 class="title is-size-1">
        About
    </h1>
  </div>

  <div class="row">
    <span class="subtitle is-size-4">
      long text.
    </span>
  </div>


</div>

Answering myself : i do use : <article class="tile is-child notification is-white">

Solution

  • Try this may be this can solve your problem. Here flex-direction: column as opposed to flex-direction: row. Here is-full is work like block element it will take width:100% always.

       <div class='rows'>
      <div class='row is-full'> Rows </div>
      <div class='row is-full'> Row one </div>
    </div>

    You can fixed this way but I am not sure that this are you looking for.

    .rows{
    display: flex;
    flex-direction: column;
}