Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create two rows using bulma

Tags:

css

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">

like image 960
Ângelo Rigo Avatar asked Apr 17 '19 12:04

Ângelo Rigo


People also ask

How do you vertically center in Bulma?

To align your columns vertically, add the is-vcentered modifier to the columns container. Second column with more content. This is so you can see the vertical alignment.

How do I center columns in Bulma?

You can make the columns centered by using .is-centered modifier on the columns container. Bulma also allows adding .is-multiline modifier to make multiple columns centered in a single row.

Is centered Bulma CSS?

Bulma is a free, open-source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property.


1 Answers

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;
}
like image 187
codeuix Avatar answered Oct 22 '22 19:10

codeuix