CODEWITHSUNDEEP
cssbulma
Foobar
Foobar

Reputation: 8467

How to vertically stack elements inside a column with Bulma?

This is a very simple question - but I can't figure it out from reading the Bulma docs.

I have the following layout:

<div class="columns is-mobile">
    <div class="column">
        <textarea></textarea>
        <button></button>
    </div>
    <div class="column">
        <div></div>
    </div>
</div>

I want the textarea and button to stack vertically instead of horizontally. I know I can use the display: block attribute to achieve the correct behavior - but considering Bulma is based on flexbox, I would think there is a better way to vertically align elements using flexbox based attributes. I tried setting flex-direction to column in the root element, but it didn't work.

Upvotes: 0

Views: 3653

Answers (1)

aldi
aldi

Reputation: 778

Bulma takes care of that with .textarea class.

Solution based on Bulma:
Add .textarea class in textarea tag.

<div class="columns is-mobile">
    <div class="column">
        <textarea class="textarea"></textarea>
        <button>Click me</button>
    </div>
    <div class="column">
        <div></div>
    </div>
</div>

Alternative:
Add these CSS attributes to your textarea: 

display:flex;
flex-direction:column;

A good practice is:
Form tags should be wrapped in a .control container.
When combining several controls in a form, use the .field class as a container, to keep the spacing consistent. 

<div class="field">
  <div class="control">
  <textarea class="textarea"></textarea>
  <button>Click me</button>
  </div>
</div>

Upvotes: 2

Related Questions