Bulmaのしたいこと別覚書き

Bulmaを使う環境で「あれしたいんだけど…」って時に探しにくかったので個人的によく使うものだけ抜粋です。

（V0.7.5）

そのほかについては公式ページをご覧ください。
https://bulma.io/documentation/

文字サイズを変える

Class	Font-size
is-size-1	3rem
is-size-2	2.5rem
is-size-3	2rem
is-size-4	1.5rem
is-size-5	1.25rem
is-size-6	1rem
is-size-7	0.75rem

文字を寄せる

Class	Alignment
has-text-centered	センター寄せ
has-text-justified	横いっぱいに広げる
has-text-left	左寄せ
has-text-right	右寄せ

文字の太さを変える

Class	Weight
has-text-weight-light	light
has-text-weight-normal	normal
has-text-weight-medium	medium
has-text-weight-semibold	semi-bold
has-text-weight-bold	bold

上下センターに配置

親要素へ　.is-vcentered

左右センターに配置

親要素へ　.is-centered

デフォルトで設定されてるmargin/paddingを取り除く

マージンを取る　.is-marginless
パディングを取る　.is-paddingless

PCの時は横並び、スマホの時は縦並びになるボックス

<div class="columns is-desktop">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>