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">
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.
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.
Bulma is a free, open-source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With